写前端页面肯定离不开模板渲染,就近期项目中用的两个前端模板做一些使用总结,顺便复习一下,也方便后面温故。

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

前端模板artTemplate,handlerbars的使用心得的更多相关文章

  1. 前端模板 artTemplate之辅助方法template.helper

    var labelMap = { onlinePayment:{ label:"在线支付", desc:"支持大部分储蓄卡.信用卡及第三方平台支付", name ...

  2. 前端模板文件化jQuery插件 $.loadTemplates

    工作中使用前端模板引擎,如 artTemplate.jsRender,来替代拼接字符串. 可是直接把模板写在页面上会带来页面臃肿,模板无法重用,与 ASP.NET等后端语言语法冲突等问题. 所以将多个 ...

  3. artTemplate-优秀的前端模板引擎

    artTemplate-优秀的前端模板引擎 1.html中引入artTemplate的js文件: <script type="text/javascript" src=&qu ...

  4. 前端模板<script type="text/template" id="tmpl">

    前端模板, 比连接字符串好用多了, 还可以使用循环\判断等语句, 减少工作量 <script type="text/template" id="member-tmp ...

  5. SS - DIY一个前端模板引擎.(一)

    前端MVVM 模式有点很多,完全摆脱了意大利面条式的代码. 个人认为,所有MVVM 的框架基础就是一个高性能的JS模板引擎,它极大简化了 DOM 操作, 使页面渲染和业务逻辑彻底分离. 为了理解模板引 ...

  6. 前端模板Juicer

    Juicer 是一个高效.轻量的前端 (Javascript) 模板引擎,使用 Juicer 可以是你的代码实现数据和视图模型的分离(MVC). 除此之外,它还可以在 Node.js 环境中运行. 用 ...

  7. DIY一个前端模板引擎.(一)

    前端MVVM 模式有点很多,完全摆脱了意大利面条式的代码.个人认为,所有MVVM 的框架基础就是一个高性能的JS模板引擎,它极大简化了 DOM 操作, 使页面渲染和业务逻辑彻底分离.为了理解模板引擎原 ...

  8. Mustache.js前端模板引擎源码解读

    mustache是一个很轻的前端模板引擎,因为之前接手的项目用了这个模板引擎,自己就也继续用了一会觉得还不错,最近项目相对没那么忙,于是就抽了点时间看了一下这个的源码.源码很少,也就只有六百多行,所以 ...

  9. JST(JavaScript Trimpath)前端模板引擎简介

    JST(JavaScript Trimpath)前端模板引擎简介及应用 今天在做某系统日志列表的时候用到了这个玩意儿.刚开始只是根据别人的例子照葫芦画瓢完成了日志列表及对应详情,晚上有空了才仔细去网上 ...

随机推荐

  1. 手把手教你crontab排障

    导读 crond是linux下用来周期性的执行某种任务或等待处理某些事件的一个守护进程,与windows下的计划任务类似,当安装完成操作系统后,默认会安装此服务工具,并且会自动启动crond进程,cr ...

  2. peewee Model.get的复杂查询

    (a | b )&c 官方文档没有具体讲到,又没有太多时间来看源码.经过尝试, (a | b) and c (a or b) and c 都是可以的. 而  (a | b) &c 是不 ...

  3. Linux的IO性能监控工具iostat详解

    Linux系统出现了性能问题,一般我们可以通过top.iostat.free.vmstat等命令来查看初步定位问题.其中iostat可以提供更丰富的IO性能状态数据. . 基本使用 $iostat - ...

  4. CentOS 下安装xdebug

    在CentOS 6.x 的系统中,是集成xdebug 的, yum install PHP-pecl-xdebug 如果是CentOS.5 也可能通过安装安装 epel 来安装 rpm -ivh ht ...

  5. 【Network】高性能 UDP 服务应该怎么搞?

    参考资料: Netty系列之Netty高性能之道 C++高性能服务框架revover:rudp总体介绍(可靠UDP传输) - zerok的专栏 - 博客频道 - CSDN.NET 高性能异步Socke ...

  6. C#函数参数

    当函数接受参数时,必须指定下属内容 函数在其定义中指定参数列表,以及这些参数的类型 在每个函数调用中匹配参数列表 参数匹配:当调用函数时,必须使参数与函数定义中指定的参数完全匹配,这意味着要匹配参数的 ...

  7. 基础知识《八》---Java反射机制

    1.反射可以做什么 2.反射相关的API 3.获取Class运行时类的实例的三种方法: 1)通过运行时类本身的.class属性***** Class clazz= Person.class; 2)通过 ...

  8. robotFramework——截屏

    测试执行过程中进行截屏并且保存,是任何一款自动化测试工具或者框架必备的功能.那么Robotframework如何进行截屏呢?Robotframework提供了一个“Screenshot”库.    使 ...

  9. HttpWebRequest.GetResponse 方法

    GetResponse 方法返回包含来自 Internet 资源的响应的 WebResponse 对象. 实际返回的实例是 HttpWebResponse,并且能够转换为访问 HTTP 特定的属性的类 ...

  10. vs2010 快捷键大全

    vs2010 快捷键大全 VS2010版快捷键 Ctrl+E,D ----格式化全部代码 Ctrl+E,F ----格式化选中的代码 CTRL + SHIFT + B生成解决方案 CTRL + F7 ...