爱学习IT200.cn
Search K

Appearance

Handlebars初次了解 ​

特点 ​

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

安装 ​

  1. 通过CDN引入:
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>

定义模板 ​

简单的表达式 ​

javascript
var template = Handlebars.compile(`
  <p>简单的表达式</p>
  <p>
  	{{firstname}}-{{lastname}}
  </p>
`);
var output = template({
  firstname: "xiao",
  lastname: "xin"
})
var template = Handlebars.compile(`
  <p>简单的表达式</p>
  <p>
  	{{firstname}}-{{lastname}}
  </p>
`);
var output = template({
  firstname: "xiao",
  lastname: "xin"
})

嵌套输入对象 ​

javascript
var template = Handlebars.compile(`
  <p>嵌套输入对象</p>
  <p>
  	{{person.firstname}}-{{person.lastname}}
  </p>
`);
var output = template({
  person: {
    firstname: "tong",
    lastname: "xue"
  }
})
var template = Handlebars.compile(`
  <p>嵌套输入对象</p>
  <p>
  	{{person.firstname}}-{{person.lastname}}
  </p>
`);
var output = template({
  person: {
    firstname: "tong",
    lastname: "xue"
  }
})

计算上下文 ​

with ​

省略上下文

javascript
var template = Handlebars.compile(`
  <p>计算上下文</p>
  <p>
  {{#with person}}
  	{{firstname}}-{{lastname}}
  {{/with}}
  </p>
`);
var output = template({
  person: {
    firstname: "tong",
    lastname: "xue"
  }
})
var template = Handlebars.compile(`
  <p>计算上下文</p>
  <p>
  {{#with person}}
  	{{firstname}}-{{lastname}}
  {{/with}}
  </p>
`);
var output = template({
  person: {
    firstname: "tong",
    lastname: "xue"
  }
})

each ​

使用this代替上下文

javascript
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"
  ]
})
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"
  ]
})

模板注释 ​

javascript
<!-- 编译到结果中 This comment will show up as HTML-comment -->
{{! This comment will not show up in the output}}
{{!-- This comment may contain mustaches like }} --}}
<!-- 编译到结果中 This comment will show up as HTML-comment -->
{{! This comment will not show up in the output}}
{{!-- This comment may contain mustaches like }} --}}

自定义助手 ​

javascript
// 相当于过滤器进行内容格式化
Handlebars.registerHelper('loud', function (aString) {
  return aString.toUpperCase()
})
// 获取到对象后可以做更多的处理
Handlebars.registerHelper('print_person', function () {
  return this.name
})
// 相当于过滤器进行内容格式化
Handlebars.registerHelper('loud', function (aString) {
  return aString.toUpperCase()
})
// 获取到对象后可以做更多的处理
Handlebars.registerHelper('print_person', function () {
  return this.name
})

块助手代码 ​

javascript
// 可定制性高
Handlebars.registerHelper("list", function (items, options) {
  const itemsAsHtml = items.map(item => "<li>" + options.fn(item) + "</li>");
  return "<ul>\n" + itemsAsHtml.join("\n") + "\n</ul>";
});
// 可定制性高
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 转义 使用{{{三成包裹}}}
1. 更改上下文: ../ 获取父级
1. HTML 转义 使用{{{三成包裹}}}
1. 更改上下文: ../ 获取父级