以前用easyui等各种富客户端的东西来展现表格,现在使用handlebars;##1. handlebars基础handlebar类似于el表达式<script id="task-table-tem
以前用easyui等各种富客户端的东西来展现表格,现在使用handlebars;##1. handlebars基础handlebar类似于el表达式
<script id="task-table-template" type="text/x-handlebars-template">{{#if content}} {{#each content}} <div class="col-sm-3 cl-padd" id="punish{{id}}"> <div class="ratio-box"> <div class="ratio-box-dd"> <span class="label label-blue">{{addOne @index}} </span> <span class="text-black jll">{{regionName}} </span> [ {{gt rate 10}} ]() <a class="text-blue-s jll" data-toggle="modal" onclick="modify('{{id}}','{{rate}}')">修改</a> <a class="text-blue-s jll" data-toggle="modal" onclick="deletePunish('{{id}}')">删除</a> </div> </div> </div> {{/each}}{{/if}}</script><script>var myTemplate = Handlebars.compile($("#task-table-template").html()); 1$('#acont').html(myTemplate(data)); 2</script>
- 一般用{{key}}的形式来表示值;
- 1的目的是构建一个模板
- myTemplate(data)会返回一个html片段,然后通过jquery的html()来添加这些片段;
- 本例中的数据结构如下:
{content:[{"id":"1","rate":"20","regionName":"济南"},{"id":"1","rate":"20","regionName":"济南"}]}
- 使用if-else判断
{{#if key}} 其他代码 {{else}} 其他代码 {{/if}}
- 使用each遍历,获取遍历下标,使用@index
{{#each key}}<span class="label label-blue">{{@index}} </span> {{each}}
##2.自定义函数
- 使用自定义的函数
{{#each key}} <span class="label label-blue">{{addOne @index}} </span> {{each}}
- 需要在Handle注册该表达式函数;当然,需要引入脚本
Handlebars.registerHelper("addOne", function(index) { // 返回+1之后的结果 return index + 1; });<script type="text/javascript" src="static/js/handlebars-v4.0.2.js" charset="utf-8"></script>
- 使用handlebars最大的好处应该是可以定义灵活的helper表达式,对一些逻辑判断的处理会非常方便##3./ 自定义条件控制语句
{{#each mesList}} {{#compare roletype}} <div class="panel-body"> <span class="text-gery">{{ctime}}</span> <br> <span class="text-time">{{content}}</span> </div> {{else}} <div class="panel-body" style="margin-right: 30px "> <div class="pull-right"><span class="text-gery">{{ctime}}</span> <span class="text-bluue">我</span></div><br><br> <div class="pull-right" >{{content}}</div><br><br> </div> {{/compare}}{{/each}}
这里的{{#compare value }}相当于{{#if}},注册的js代码如下:
Handlebars.registerHelper("compare", function(v1, options) { if (v1 == 1) { // 满足添加继续执行 return options.fn(this); } else { // 不满足条件执行{{else}}部分 return options.inverse(this); } });
函数里的options指的应该是一次加载操作;