Handlebars.js 表达式
表达式是Handlebars模板的基本组成部分,你可以单独的以{{mustache}}
的形式使用,传递给Handlebars,或者当做hash的参数。
基础:
最简单的Handlebars表达式是简单的标识
<h1>{{title}}</h1>
这个表达式的意思是:查到当前数据上下文的title
属性。块helpers可以操作当前的数据上下文,但是不影响表达式的意思。
表达式也可以是用“点”分割的路径
<h1>{{article/title}}</h1>
这个表达式的意思是:查找当前数据上下文的
article
属性,然后在结果中查找
title
属性。handlebars也支持已经弃用
/
分隔符,所以上面的表达式也可以写成
<h1>{{article/title}}</h1>
表达式可以包含任意的字符,除了:空格!
"
#
%
&
'
(
)
*
+
,
.
/
;
<
=
>
@
[
\
]
^
`
{
|
}
~
如果表达式不是有效的字符,可以使用[
:
{{#each articles.[10].[#comments]}}
<h1>{{subject}}</h1>
<div>
{{body}}
</div>
{{/each}}
上例中,模板会循环
articles[10]['#comments']
。
Handlebars会编译{{expression}}
返回的值,如果你不想结果被编译,可以使用{{{
{{{foo}}}
helper:
helper调用是个简单的标识符,跟着零个或者多个参数(用空格分隔),每一个参数都是Handlebars表达式
{{{link story}}}
上例中,link
是helper的名称,story
是helper的参数。Handlebars就像上文所说的处理参数
Handlebars.registerHelper('link', function(object) {
return new Handlebars.SafeString(
"<a href='" + object.url + "'>" + object.text + "</a>"
);
});
当helper返回html时,如果你不想被编码的话,需要返回Handlebars安全字符串。
也可以传递一个字符串当做helper的参数:
{{{link "See more..." story.url}}}
上例中,Handlebars会传给helper两个参数:字符串See more...
和当前上下文的story.url
Handlebars.registerHelper('link', function(text, url) {
return new Handlebars.SafeString(
"<a href='" + url + "'>" + text + "</a>"
);
});
你也可以使用同样的helper,通过动态字符串story.text
{{{link story.text story.url}}}
Handlebars helper 可以接受个任意顺序的“键值对”作为最后一个参数(文档中被称为hash)
{{{link "See more..." href=story.url class="story"}}}
hash的key必须是简单的标识符,value必须是表达式(就是字符串,路径,标识符)
Handlebars.registerHelper('link', function(text, options) { var attrs = []; for(var prop in options.hash) { attrs.push(prop + '="' + options.hash[prop] + '"'); } return new Handlebars.SafeString( "<a " + attrs.join(" ") + ">" + text + "</a>" ); });
Handlebars提供额外的元数据,例如hash,作为helper的最后一个参数。
Handlebars也提供了一种机制,调用helper with部分模板。块级helper以后可以调用零次或者多次,with任意的数据上下文。