Handlebars 模板引擎
渲染可能需要 几十ms,从 redis 读取字符串直接只需要 1 ms;
编译模板:
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {title: "My New Post", body: "This is my first post!"}
var html = template(context);
在express中:app.render('path',context)
不希望Handlebars来进行HTML编码,使用三个大括号即可:
{{{
。手动编码:
Handlebars.registerHelper('link', function(text, url) {
text = Handlebars.Utils.escapeExpression(text);
url = Handlebars.Utils.escapeExpression(url);
var result = '' + text + '';
return new Handlebars.SafeString(result);
});
除了使用.访问属性,还可以可以使用 ../
向父级(上层)上下文(并非路径)。而且是表示对模板的父级作用域的引用,并不表示在上下文数据中的上一层。
Handlebars也允许通过一个 this
的引用来解决 helpers 和 数据字段间的名字冲突
模板注释{{!
}},一些多行注释可以使用 {{!-- --}}
语法。
Handlebars.registerHelper
注册helper
Helpers 会把当前的上下文作为函数中的 this
上下文。
story
{{#
Helpers
avg1 avg2 avg3}} 或者
{{{link
}}}
内置helpers:
{{> (lookup data 'article')}} // partials,() 应用函数
{{#with author}}
{{#each people}} // 参数 . 等于 this , 还有 @index 可以用@表示从data字段下载选取变量
{{#if author}}
{{#unless license}}
{{log "Look at me!"}}
定义好页面的layout文件后,然后在内容变化的位置加入{{{body}}}(即只有一个)
,这样我们每次渲染页面都会替换到{{{body}}}
中,这种"布局文件"的概念大大的降低了我们的维护成本。
partials文件,也就是片段文件,可以放置公共的引用。
在配置Handlebars的时候,我们可以指定partials文件目录:
var hbs = exphbs.create({
partialsDir: 'views/partials',
layoutsDir: "views/layouts/",
defaultLayout: 'main',
extname: '.hbs',
helpers: hbsHelper
});
这样在partials
目录下定义的handlebars文件都会是partials文件,使用方法:{{> head}}
。