handlebar

handlebar的学习

handlebar是js一个语义模板库，通过对view和data的分离来快速构建web模块。

在加载的时候就被预编译，而不是到客户端才编译。

使用方法：

1，引用

<script type="text/javascript" src=".js/handlebars.js"></script>  

2，建立模板

需要在<script></script>标签里，匹配项可以是变量，也可以是函数。

  <script id="welfareNewsDeatil-tpl" type="text/x-handlebars-template">
      	<div class="welfare_wrap">
      		<ul class="welfare_list">
      			<li class="welfare_item"><span>项目名称</span><span>{{object.pwProjNm}}</span></li>
      			<li class="welfare_item"><span>起止日期</span><span id="dateText"></span></li>
      			<li class="welfare_item"><span>项目发起机构</span><span>{{object.orgBrnchNm}}</span></li>
      			<li class="welfare_item"><span>覆盖地区</span><span>{{object.provNm}}{{object.cityNm}}</span></li>
      		</ul>
      	</div>
      </script>

3，获取模板，使用Hanlebars.compile()预编译模板

var welfareNewsDeatil = Util.hdb.compile($('#welfareNewsDeatil-tpl').html());
//使用requireJS加载handlebarJS

4，匹配json内容，输入模板

$('#welfareNewsDeatil').html(welfareNewsDeatil(json))

转载于:https://www.cnblogs.com/fnncat/p/6036113.html