文章目录
  1. 1. 目录
  2. 2. 安装和使用
  3. 3. Handlebar的表达式
    1. 3.1. 块表达式(Block Expressions)
    2. 3.2. 内置块表达式(Block helper)
      1. 3.2.1. each block helper
      2. 3.2.2. if else block helper
      3. 3.2.3. unless block helper
      4. 3.2.4. with block helper
    3. 3.3. 自定义helper
  4. 4. 其他
    1. 4.1. Handlebars的访问(Path)
    2. 4.2. 调试技巧
  5. 5. 参考

Handlebars.js 是一个 Javascript 客户端的模板引擎,它通过对 view 和 data 的分离来快速构建 Web 模板。
它是在加载时被预编译,而不是到了客户端执行到代码时再去编译,可以保证模板加载和运行的速度;
它是一个 Javascript 库,就像你在页面中包含其他.js文件一样。有了它,你可以在HTML页面内添加模板。

其他:
一个弱逻辑模板引擎;Mustache.js 的超集;在服务端预编译模板;支持 Helper 方法;在模板中支持 this 的概念。

想要了解以下概念,点击查看 学习Javascript模板Handlebars.js
1.Handlebars.js 是怎样运行的?
2.为什么使用 Javascript 模板引擎?
3.什么情况下使用 Javascript 模板?
4.为什么要选择 Handlebars.js?

目录

  1. 安装和使用
  2. 表达式
    Block 表达式:可以改变js的上下文
    Handlebars 的内置块表达式(Block helper):对数据的逻辑操作
    (1)each block helper
    (2)if else block helper
    (3)unless block helper
    (4)with block helper:可将上下文转移到数据的一个 section 里面(编译时候进行)
    自定义helper:在 js 中用 Handlebars.registerHelper 注册 helpers
  3. 其他
    (1)Handlebar 的注释(comments)
    (2)Handlebars 的访问(Path)
    (3)调试技巧
    (4)handlebars 的 jquery 插件
    (5)partials
    当你想要复用模板的一部分,或者将长模板分割成为多个模板方便维护时,partials就派上用场了。

安装和使用

Github 上下载最新版本。它是一个纯JS库,你可以像使用其他JS脚本一样用script标签来包含handlebars.js。

如何使用?见【3】
1.在 HTML 页面上,通过使用 Handlebars 表达式设定模板,将模板添加到 script 标签中
单独建立一个模板,注意type和id(目前Handlebars仅支持id操作),要用它们来获取模板内容。
2.在 js 中,初始化数据对象
3.在 js 中,使用 Handlebars 编译函数来编译模板

Handlebar的表达式

Handlebars expressions 是 handlebars 模板中最基本的单元,使用方法是用双大括号。
表达式也支持点操作符 content.title,该形式可以调用嵌套的值或者方法。
handlebars 会根据上下文来自动对表达式进行匹配,对象甚至是函数:
1.如果匹配项是个变量,则会输出变量的值
2.如果匹配项是个函数,则函数会被调用
3.如果没找到匹配项,则没有输出

块表达式(Block Expressions)

如果当前的表达式是一个数组,则 Handlebars 会“自动展开数组”,并将 Blocks 的上下文设为数组中的元素。

内置块表达式(Block helper)

用 Helpers,用户可以操作 handlebars 模板中的数据,添加相应的逻辑等等。

each block helper

内置的 each helper遍 历列表块内容,用 this 来引用遍历的元素,this 指的是数组里的每一项元素。

这和上面的Block很像,但是原理不一样。name是数组,而内置的each就是为了遍历数组用的,更复杂的数据也同样使用。 【?】

if else block helper

if 就像你使用 JavaScript 一样,指定条件渲染 DOM。
如果它的参数返回false,undefined, null, “” 或者 [] (a “false” value), Handlebar 将不会渲染 DOM。

unless block helper

反向的if

with block helper

一般情况下,Handlebars 模板会在编译的阶段的时候进行 context 传递和赋值。
使用 with 的方法,我们可以将 context 转移到数据的一个 section 里面(如果你的数据包含 section)。
这个方法在操作复杂的 template 时候非常有用。

自定义helper

其他

Handlebars的访问(Path)

Handlebar 支持路径和 mustache,Handlebar 还支持嵌套的路径,使得能够查找嵌套低于当前上下文的属性
可以通过.来访问属性,也可以使用../,来访问父级属性。

调试技巧

加载一段”debug helper”,就可以在模板文件里通过 debug 或是 debug someValue 方便数据了。

参考

【1】Handlebars.js 模板引擎:全面详细
【2】HTML5应用开发:JavaScript语义模板库handlebars教程:简单说明+完整demo。用代码说,所见即所得
【3】Handlebars.js初级教程:学习Javascript模板Handlebars.js :说的很贴心,表示很同意作者

【4】在Express项目中使用Handlebars模板引擎:很客观的一个人,项目经验,值得借鉴
【5】Web 模板 Jade、EJS、Handlebars 万行代码解释效率比较,Jade 完败:讨论、七嘴八舌

【6】Ember.js-Handlebars系列

文章目录
  1. 1. 目录
  2. 2. 安装和使用
  3. 3. Handlebar的表达式
    1. 3.1. 块表达式(Block Expressions)
    2. 3.2. 内置块表达式(Block helper)
      1. 3.2.1. each block helper
      2. 3.2.2. if else block helper
      3. 3.2.3. unless block helper
      4. 3.2.4. with block helper
    3. 3.3. 自定义helper
  4. 4. 其他
    1. 4.1. Handlebars的访问(Path)
    2. 4.2. 调试技巧
  5. 5. 参考