前端模板Handlerbar

在使用mustache.js时候, 遇到一些格式化时间这样的功能, 总会很麻烦.
比如:

{
   "items":[
       {
         "title" : "标题1",
         "createDate":"2016-06-10T15:48:00.000Z"
       },
       {
         "title" : "标题2",
         "createDate":"2016-06-10T18:48:00.000Z"
       }
   ]
}

要想格式化列表里的时间createDate, 你必须要在数据对象中像这样注册一个handler:

{
   items : ...
   dateFromat : function(){  
     return moment(this.createDate).format('YYYY-MM-DD') 
   }
}

每次做渲染的时候都必须重复注册handler,很是麻烦.
注册完后,使用handler的时候语法也很奇葩:

{{#items}}
    <h3 class="list-group-item-heading">{{title}}</h3>
    {{#dateFromat}}
    <span>{{formatDate createDate}}</span>
    {{/dateFromat}}
{{/items}}

为此, 特意google了一下. 发现了另一个语法兼容mustache的前段模板Handlerbar, 和它的名字表达的一样, 可以方便的注册一堆handler.

使用方式很简单:

1. 注册handler

   Handlebars.registerHelper('formatDate', function(date) {
    return  moment(date).format('YYYY-MM-DD hh:mm:ss');
   });

2. 渲染时调用handler

   {{#items}}
    <h3 class="list-group-item-heading">{{title}}</h3>
    <span>{{formatDate createDate}}</span>
   {{/items}}

ok.

另外,它提供的Html预编译成JavaScript功能也很方便.

不愧是大型前端工程的利器.