要点:
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
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之外的内容。