HandleBars

前端

基本框架

let template = $('#card').html(); // #card是在script中想写的template
// <script id="card" type="text/x-handlebars-template">
let f = Handlebars.compile(template);
let h = f(data);
$('#app').html(h); // #card是需要插入的html锚点。

遍历数组

{{#each this}}
{{/each}}
// 遍历下标
{{@index}}
// 遍历上层上下文下标
{{@../index}}

修改上下文

{{#with obj}}
{{/with}}

判断

{{#if boolean}}
{{/if}}

Helper

内联Helper

将数字序号转换成中文序号

{{chinese @index}}
Handlebars.registerHelper('chinese', (val) => ['一', '二', '三'][val]);

块Helper

判断是否为第二个，如果是，则文字变成红色

<div class="card" {{#isTwo @index}} style="color:red" {{/isTwo}}>
 ...
</div>

Handlebars.registerHelper('isTwo', (val, options) => {
   if (val === 1) {
      return options.fn(this);
   }
});

注释

{{!注释内容}}