Handlebars初次了解

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

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>
  {{#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>";
});