Handlebars 模板引擎

Tags
javascripthtml
Created
Jan 25, 2016 12:49 PM

渲染可能需要 几十ms,从 redis 读取字符串直接只需要 1 ms;

https://segmentfault.com/a/1190000000342636

编译模板:

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 = '<a href="' + url + '">' + text + '</a>'; return new Handlebars.SafeString(result); });除了使用.访问属性,还可以可以使用 ../向父级(上层)上下文(并非路径)。而且是表示对模板的父级作用域的引用并不表示在上下文数据中的上一层Handlebars也允许通过一个 this 的引用来解决 helpers 和 数据字段间的名字冲突模板注释{{! }},一些多行注释可以使用 {{!-- --}} 语法。Handlebars.registerHelper注册helperHelpers 会把当前的上下文作为函数中的 this 上下文。 {{#Helpers avg1 avg2 avg3}} 或者{{{link story}}}

内置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}}

SuperMade with Super