前端模板artTemplate,handlerbars的使用心得
2016-05-05 15:21
260 查看
写前端页面肯定离不开模板渲染,就近期项目中用的两个前端模板做一些使用总结,顺便复习一下,也方便后面温故。
2,安全,默认对输出进行转义、在沙箱中运行编译后的代码
3,支持
4,支持预编译,可将模板转换成为非常精简的 js 文件
注:data数据为JSON格式
也可以返回html代码,用来实现相应的权限过滤,如:
2,Mustache 模板和 Handlebars 是兼容的,所以你可以把Mustache模板拿来导入到Handlebars中,并开始使用Handlebars所提供的更丰富的功能。
链接参考:
1.http://aui.github.io/artTemplate/
2.https://segmentfault.com/a/1190000000342636?from=androidqq#articleHeader2
1,artTemplate
优点:
1,一般web端用得较多,执行速度通常是 Mustache 与 tmpl 的 20 多倍,支持运行时调试,可精确定位异常模板所在语句2,安全,默认对输出进行转义、在沙箱中运行编译后的代码
3,支持
include语句,可在浏览器端实现按路径加载模板
4,支持预编译,可将模板转换成为非常精简的 js 文件
编写模板:
<tbody class="work-shift-list hide" id="workShiftListHIDE"> <tr> <td colspan="5">数据努力加载中..</td> </tr> </tbody>
<script type="text/html" id="workShiftListTpl"> {{each data as value i}} <tr class="" role="row" data-tr={{value.uname}}> <td class="shift-name" data={{value.uid}}>{{value.uname}}</td> {{if value.startTime != null}} <td>{{value.startTime}} ~ {{value.endTime}}</td> {{else}} <td><p class="no-shift">暂无排班<p></td> {{/if}} {{if value.workShift != null}} <td>{{value.workShift.name}}</td> {{else}} <td></td> {{/if}} <td>{{value.place}}</td> <td class="center">{{value.remark}}</td> </tr> {{/each}} </script>
渲染模板:
renderHtmlTemp.html('workShiftListHIDE', 'workShiftListTpl',data);
注:data数据为JSON格式
自定义注册模板:
当有特定的场景需要对数据进行相关的转换时,我们可以通过自定义模板函数来实现,如果是否为法定节日用1,0表示,但是页面要显示‘是’,‘否’。自定义模板如下:template.helper('$isNationalHolidays', function (otherLaw) { if (otherLaw == '1') return = '是' else return = '否' });
法定假日休息:{{$isNationalHolidays otherLaw}}
也可以返回html代码,用来实现相应的权限过滤,如:
//注册模板,系统管理员可以删除通过的排班 helperARTTemplate: function(){ template.helper('$isAdmin', function (scheduleId, templateId) { var rs; if (user.orgId == 1) { rs = '<a href="javascript:;" class="btn-icon btn-icon-del" onclick="schedulingClass.publicHandleTools.del('+ scheduleId +','+ templateId +')" title="删除"><i></i></a>' } return rs; }); },
{{$isAdmin value.scheduleId,value.templateId}}
2,handlerbars
优点:
1,轻量级,一般用于移动端h5应用的开发,官方是说Handlebars 为你提供了一个可以毫无挫折感的高效率书写 语义化的模板 所必需的一切。2,Mustache 模板和 Handlebars 是兼容的,所以你可以把Mustache模板拿来导入到Handlebars中,并开始使用Handlebars所提供的更丰富的功能。
编写模板:
<section class="apply"> <div class="ui-loading-wrap"></div> </section>
<script id="list-apply" type="text/x-template"> {{#if this}} {{#each this}} <div class="ui-row-flex ui-arrowlink apply-list" applyId={{this.applyId}}> <div class="ui-col circle"> <div class="ui-avatar"> <span class="radius-type {{typeClass this.type}}"> <label>{{type this.type}}</label> </span> </div> <h5>{{this.applySpan}}</h5> </div> <div class="ui-col ui-col-4"> <div class="ui-row"><span class="ui-txt-info">时间:</span><span class="ui-txt-highlight">{{cut this.applyDateTime}}<span></div> <div class="ui-row"><span class="ui-txt-info">事由:</span><span>{{cut this.applyRemark}}</span></div> <div class="ui-row"> <span class="apply-date"><h5 class="ui-txt-info">{{this.formatApplyDate}}申请</h5></span> <span class="status {{statusClass this.status}}">{{status this.status}}</span> </div> </div> </div> {{/each}} {{else}} <section class="ui-notice"> <i></i> <p>暂无数据!</p> </section> {{/if}} </script>
渲染模板:
var tabTemplate = Handlebars.compile($('#list-apply').html()); $('.apply').html(tabTemplate(data));
Helpers:
类似与artTemplate注册自定义模板,Handlebars 的 helpers 在模板中可以访问任何的上下文。当内置的helpers不满足需求时,我们可以通过Handlebars.registerHelper方法注册一个 helper。
//自定义handlebars helper 申请状态,1待审核,2已通过,3被驳回 Handlebars.registerHelper('status', function(value, options) { if(value == 1) return '待审核'; else if(value == 2) return '已通过'; else if(value == 3) return '被驳回'; });
<div class="ui-row"> <span class="apply-date"><h5 class="ui-txt-info">{{this.formatApplyDate}}申请</h5></span> <span class="status {{statusClass this.status}}">{{status this.status}}</span> </div>
模板注释:
跟在代码中写注释一样,注释是不会最终输出到返回结果中的。所有注释都必须有}},一些多行注释可以使用
{{!-- --}}语法。
<div class="entry"> {{! This comment will not be in the output }} <!-- This comment will be in the output --> </div>
链接参考:
1.http://aui.github.io/artTemplate/
2.https://segmentfault.com/a/1190000000342636?from=androidqq#articleHeader2
相关文章推荐
- 实例讲解JavaScript的Backbone.js框架中的View视图
- 深入了解javascript中的exec与match方法
- 百度地图js版定位控件
- 减少样式计算的范围和复杂度
- javascript对话框组件——artDialog
- 用js代码判断是否IE浏览器
- HTML网页制作:[12]使用框架结构之frameset
- 全面解析JavaScript的Backbone.js框架中的Router路由
- javascript严格模式
- 超强排序JavaScript插件
- Webpack讲解
- caffe添加新层教程
- Libevent开源库之evbuffer
- 《剑指offer》约瑟夫环问题
- gson解析复杂json语句的方法
- React Diff剖析
- css 字间距、CSS字体间距、css 字符间距设置
- 详解Backbone.js框架中的模型Model与其集合collection
- 基于jQuery实现动态搜索显示功能
- 用jquery获取select标签中选中的option值及文本