handlebar 初学笔记

artTemplete tmod停止维护，不得不换一个html模板，初步选择handlebar，简单做笔记如下：

    var data ={
        area:'上海',
        users: [{
             name:'Tom',
             age:28
        },{
             name:'Lily',
             age:20
        }]
    }

1.循环

handlebar：

    {{#each users}}
        {{@index}}{{@key}} 
        {{@first}}
        {{@last}}
        {{@root}}
        {{@level}}
        {{name}} 
        {{age}}
        {{../area}}
        {{toUpperCase name}}
    {{/each}}

artTemplete：

        {{each users as item i}} 
            {{item.name}}{{item.age}}
            {{item[0]}}
            {{name | toUpperCase}}
        {{/each}}

        或

        {{each users}}
            {{$value.name}}
            {{$value.age}}
            {{name | toUpperCase}}
        {{/each}}

总结：

1.开始符加‘#’
2.对象属性不需要像{{users.name}}，而是直接访问{{name}}
3.指定属性访问用‘@’，没有item缓存变量
4.helper 方法使用，helpler名前置不需要‘|’，参数空格传入，可多个
5.webpack helper使用方法：
loader后加路径参数，每个helper方法都是一个js文件，文件名为helper方法名

        {   
                test: /\.html$/,
                loader: "handlebars-loader?helperDirs[]=" + __dirname + "/script/helpers"
        }

2.逻辑判断

handlebar：

    {{#if name}}
        //dom code...
    {{/if}}

artTemplete：

        {{if name=='Tom'}}
            //dom code...
        {{/if}}
        {{if name=='Tom'}}
            //if code...
        {{else}}
            //else code...
        {{/if}}

总结：

1.需要加‘#’
2. if只能进行布尔判断，具体判断只能借助helper方法