Handlebars初次了解

特点

高效地构建语义化模板
Handlebars 与 Mustache 模板基本兼容。
Handlebars 会将模板编译为 JavaScript 函数, 执行速度快。安装
通过CDN引入:

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

嵌套输入对象

代码语言：javascript复制

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

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

模板注释

代码语言：javascript复制

<!-- 编译到结果中 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
})

块助手代码

代码语言：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>";
});

其他

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

cdn javascript

0 人点赞