关于handlebars的学习

要点：

     Handlebars expression

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

[html] view plain copy

1. <span>{{value}}</span>  

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

[html] view plain copy

1. <span>{{value}}</span>  

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

     Handlebars Path

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

[html] view plain copy

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

     数据对象为：

[javascript] view plain copy

1. {  
2.      module:{  
3.           path:"./path"  
4.      }  
5. }  

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

[html] view plain copy

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

     数据对象为：

[javascript] view plain copy

1. {  
2.      export:{  
3.           name: "module"  
4.      },  
5.       module:{  
6.           path:"../path"  
7.      }  
8. }  

     Handlebars Block

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

[html] view plain copy

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

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

[html] view plain copy

1. {{#obj}}{{mission}}{{/obj}}  

     Handlebars Block Helper

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

          1. if block helper

                    用法形式如下：

[html] view plain copy

1. {{#if this}}  
2.      ...  
3. {{else}}  
4.      ...  
5. {{/if}}  

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

                   用法形式如下：

[html] view plain copy

1. {{#unless this}}  
2.       ...  
3. {{else}}  
4.       ...  
5. {{/unless}}  

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

          3. each block helper

                    用法形式如下：

[html] view plain copy

1. {{#each array}}  
2.        ...  
3. {{/each}}  

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

          4. with block helper

                    用法形式如下：

[html] view plain copy

1. {{#with obj1}}  
2.        ...  
3. {{/with}}  

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

     Handlebars Partial

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

          首先是注册一个子模板

[javascript] view plain copy

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

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

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

[html] view plain copy

1. {{#parent}}  
2.      ...  
3.      {{> child}}  
4.      ...  
5. {{/parent}}  
6. {{> child}}  

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

     Handlebars registerHelper

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

          1. expression helper

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

               首先是自定义helper：

[javascript] view plain copy

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

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

[html] view plain copy

1. {{functionHelperName arg1 ... argn}}  

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

          2. block helper

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

               首先仍然是注册一个helper

[javascript] view plain copy

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

               接着是模板代码

[html] view plain copy

1. {{#blockHelperName this}}  
2.      code  
3. {{/blockHelperName}}  

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