要点:
Handlebars expression
可以理解为Handlebars模板中用到的表达式。如:
形式为用两个花括号包围起来的表达式。value可以是普通数据类型,也可以是函数,为函数时则返回函数的返回值,函数返回undefined时则返回空字符串。Handlebars也有this,this表示当前的对象,调用this的属性的值时直接写属性名即可。如:
实际上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中的作用域块。形式为:
如上时,则在两个表达式之间形成了一个块,在这个块中,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){
- ...
- stack += option.fn(target);
- return stack;
- })
接着是模板代码
- {{#blockHelperName this}}
- code
- {{/blockHelperName}}
在blockHelperName中的代码会被传入到注册blockHelperName时创建的函数中。在opiton.fn(target)中会被作为模板文件传入,target则作为该模板文件的this上下文,而option.fn(target)返回的是已经带有数据的html字符串。所以最后返回的stack就是已经完成编译的html代码。之后会将这些代码放置在code所在位置。之后继续编译该blockHelper之外的内容。