前端模板artTemplate，handlerbars的使用心得

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

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