【Handlebars】基本用法

基本使用方法

使用Handlebars，首先我们将Html抽出来，就像用script标签包裹起来，放入我们当前的页面中：

<script src="script/lib/handlebars.js"></script>

<div id="container"></div>
<script type="text/x-handlebars-template" id="template-user">
    {{#each this}}
        <p>{{name}}:{{age}}</p>
    {{/each}}
</script>

JS使用模板:

var $container = $('#container')
var source = $('#template-user').html()
var template = Handlebars.compile(source)   //编译成模板
var html = template(data)   //生成完整的html结构
$container.html(html)

if

{{#if isEdit}}
    <p>isEdit</p>
{{/if}}

if else

{{#if isEdit}}
    <p>isEdit</p>
{{else}}
    <p>isNotEdit</p>
{{/if}}

多个分支，写法和js一样：

{{#if isEdit}}
    <p>isEdit</p>
{{else if isRead}}
    <p>isNotEdit isRead</p>
{{else}}
    <p>isNotRead</p>
{{/if}}

unless

与if相反

each 遍历数组

通过@index或者@key都可以获得序号，但是序号都是从0开始的，这个比较坑！如果要从1开始，得自己写个helper处理

通过@first和@last可以判断是否是数组的第一个或者最后一个。

遍历对象

{{#each this}}
    <p>{{@key}}:{{this}}</p>
{{/each}}

var data = {
    name: 'yyy',
    age: 23
};

#页面效果
name:yyy
age:23

{{{}}} 避免HTML转义

<div>{{{richText}}}</div>

var data = {
    richText: '<div>this is rich text</div>'
};

如果使用{{}}，其中的HTML标签会转义输出。

Helpers

注册一个全局的moment，这样所有的时间格式化，都可以通过{{moment time}}调用，维护的成本大大降低。

{{#each this}}
    <p>{{name}}:{{moment addTime}}</p>
{{/each}}

#js

Handlebars.registerHelper('moment', function (date, options) {
    var formatStr = options.hash.format || 'YYYY-MM-DD';
    return new Handlebars.SafeString(moment(date).format(formatStr));
});

var data = [
    {
        name: 'xxx',
        addTime: new Date()
    },
    {
        name: 'zzz',
        addTime: new Date()
    }
];

Handlebars.SafeString就是不转义Html，如果想转义Html直接return内容即可。

#template
<p>{{safe}}</p>

#js
Handlebars.registerHelper('safe', function () {
   return new Handlebars.SafeString('<div>safe string</div>')
});

#页面效果
safe string

…/

通过…/回到each之外。

#template
<ul>
    {{#each this}}
        <li>
            <ul>
                {{#each this}}
                    <li>{{@../index}}-{{@index}}{{this}}</li>
                {{/each}}
            </ul>
        </li>
    {{/each}}
</ul>

#js
var data = [
    ['aaa', 'bbb', 'ccc'],
    ['ddd', 'eee', 'fff']
];

#页面效果
0-0 aaa
0-1 bbb
0-2 ccc
1-0 ddd
1-1 eee
1-2 fff