Handlebars 学习笔记

要点：

Handlebars expression

可以理解为Handlebars模板中用到的表达式。如：

          <span>{{value}}</span>

形式为用两个花括号包围起来的表达式。value可以是普通数据类型，也可以是函数，为函数时则返回函数的返回值，函数返回undefined时则返回空字符串。Handlebars也有this，this表示当前的对象，调用this的属性的值时直接写属性名即可。如：

          <span>{{value}}</span>

实际上value的完整写法是this.value。这里又涉及到了一个要点——Handlebars Path

Handlebars Path

handlebars模板支持点操作符(".")。与在JS代码中一样，点操作符(".")表示对象的属性，如：

          <span>{{module.path}}</span>

数据对象为：

          {
               module:{
                    path:"./path"
               }
          }

另外，也可以用"../"的形式表示返回当前对象的上级对象环境。如：

          <span>{{../module.path}}</span>

数据对象为：

          {
               export:{
                    name: "module"
               },
                module:{
                    path:"../path"
               }
          }

Handlebars Block

类似于js中的作用域块。形式为：

          {{#obj}}...{{/obj}}

如上时，则在两个表达式之间形成了一个块，在这个块中，this就是obj，故对于需要写为{{obj.mission}}的语法，则可以写为

          {{#obj}}{{mission}}{{/obj}}

Handlebars Block Helper

Handlebars内定了一些简单的逻辑帮助使用者。

1. if block helper

用法形式如下：

               {{#if this}}
                    ...
               {{else}}
                    ...
               {{/if}}

需要注意的是，{{#if expression}}中的expression不能有运算符，只能是数据类型，expression为true时（参考js中其他数据类型转化为boolean类型的规则）。其它的else等不用讲。
2. unless block helper

用法形式如下：

                {{#unless this}}
                      ...
                {{else}}
                      ...
                {{/unless}}

与if的差别类似于if(condition)和if(!condition)的区别。

3. each block helper

用法形式如下：

               {{#each array}}
                      ...
               {{/each}}

遍历数组array中的元素，并将该block中的this对象赋值为当前遍历的的元素。其实直接{{#array}}...{{/array}}也是一样的效果，但原理不一样，区别暂时还不清楚。

4. with block helper

用法形式如下：

                {{#with obj1}}
                       ...
                {{/with}}

作用暂时没发现与{{#obj1}}{{/obj1}}有什么不同。

Handlebars Partial

Handlebars还提供了将一个父模板分为几个子模板的功能，也就是可以将几个子模板组合为一个父模板，这提高了编写模板的灵活度（除了在父模板里指定子模板外，子模板与父模板之间没有任何关联，耦合度非常低）。

首先是注册一个子模板

               Handlebars.registerPartial("child", $(".child-tmpl").html());

第一个参数为子模板的名称，方便在父模板中调用，第二个参数为子模板的主体，即子模板所在的script的内容。

接着便是在父模板中调用了

               {{#parent}}
                    ...
                    {{> child}}
                    ...
               {{/parent}}
               {{> child}}

调用子模板的形式是{{> 子模板名称}}，子模板可在父模板的任何地方调用。

Handlebars registerHelper

Handlebars提供的一个扩展功能，供使用者除了使用内建的几个helper（if else/each/with/unless）之外，用户还可以自定义各种helper。可自定义的helper分为两种，一种为expression helper，一种为 block helper。

1. expression helper

是一种以表达式形式使用的helper

首先是自定义helper：

                    Handlebars.registerHelper("expressionHelperName", function(arg1 [, argn]){});

之后便可以在模板中调用：

                    {{functionHelperName arg1 ... argn}}

多个参数之间用空格隔开，返回函数的返回值。函数的执行环境为具体调用该function helper时所处的上下文

2. block helper

使用时能形成上下文区域的helper，很有扩展性的功能。

首先仍然是注册一个helper

                    Handlebars.registerhelper("blockHelperName", function(arg1[, argn], options){//arg为传入的参数，option为Handlebars内建的一个对象，不用传入。
                         ...
                         stack += option.fn(target); //stack为在本函数内定义的一个变量，为String格式，变量名随便，只要返回该值就行。target一般为数据对象。这样写的原因后面会说到。
                         return stack; //返回的值，必须为字符串。
                    })

接着是模板代码

                    {{#blockHelperName this}}
                         code
                    {{/blockHelperName}}

在blockHelperName中的代码会被传入到注册blockHelperName时创建的函数中。在opiton.fn(target)中会被作为模板文件传入，target则作为该模板文件的this上下文，而option.fn(target)返回的是已经带有数据的html字符串。所以最后返回的stack就是已经完成编译的html代码。之后会将这些代码放置在code所在位置。之后继续编译该blockHelper之外的内容。