Handlebars初次了解

特点

1. 高效地构建语义化模板
2. Handlebars 与 Mustache 模板基本兼容。
3. Handlebars 会将模板编译为 JavaScript 函数, 执行速度快。

安装

1. 通过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>";
});

其他

1. HTML 转义 使用{{{三成包裹}}}
2. 更改上下文: ../ 获取父级