特点
- 高效地构建语义化模板
- Handlebars 与 Mustache 模板基本兼容。
- Handlebars 会将模板编译为 JavaScript 函数, 执行速度快。
安装
- 通过CDN引入:
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
定义模板
简单的表达式
var template = Handlebars.compile(` <p>简单的表达式</p> <p> {{firstname}}-{{lastname}} </p> `); var output = template({ firstname: "xiao", lastname: "xin" })
嵌套输入对象
var template = Handlebars.compile(` <p>嵌套输入对象</p> <p> {{person.firstname}}-{{person.lastname}} </p> `); var output = template({ person: { firstname: "tong", lastname: "xue" } })
计算上下文
with
省略上下文
var template = Handlebars.compile(` <p>计算上下文</p> <p> {{#with person}} {{firstname}}-{{lastname}} {{/with}} </p> `); var output = template({ person: { firstname: "tong", lastname: "xue" } })
each
使用this代替上下文
var template = Handlebars.compile(` <p>计算上下文</p> <p> {{#each people}} <li>{{this}}</li> {{/each}} </p> <p> {{#each persons}} <li>{{this.name}}</li> {{/each}} </p> `); var output = template({ persons: [ { name: 'zhang' }, { name: 'wang' } ], people: [ "Yehuda Katz", "Alan Johnson", "Charles Jolley" ] })
模板注释
<!-- 编译到结果中 This comment will show up as HTML-comment --> {{! This comment will not show up in the output}} {{!-- This comment may contain mustaches like }} --}}
自定义助手
// 相当于过滤器进行内容格式化 Handlebars.registerHelper('loud', function (aString) { return aString.toUpperCase() }) // 获取到对象后可以做更多的处理 Handlebars.registerHelper('print_person', function () { return this.name })
块助手代码
// 可定制性高 Handlebars.registerHelper("list", function (items, options) { const itemsAsHtml = items.map(item => "<li>" + options.fn(item) + "</li>"); return "<ul>\n" + itemsAsHtml.join("\n") + "\n</ul>"; });
其他
- HTML 转义 使用{{{三成包裹}}}
- 更改上下文: ../ 获取父级
