Handlebars的简单使用

简介

Handlebars 是 JavaScript 一个语义模板库，通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"（无逻辑模版）的思路，在加载时被预编译，而不是到了客户端执行到代码时再去编译， 这样可以保证模板加载和运行的速度。Handlebars兼容Mustache，你可以在Handlebars中导入Mustache模板。

安装

Handlebars的安装非常简单，你只需要从Github下载最新版本，你也可访问下面网址获取最新信息：http://handlebarsjs.com。
  目前handlebars.js已经被许多项目广泛使用了，handlebars是一个纯JS库，因此你可以像使用其他JS脚本一样用script标签来包含handlebars.js

使用

1.Templates

当您引入库之后，我们可以愉快的书写模板了，推荐的方式是通过特殊type的script标签来添加模板，type属性是非常重要的，否则浏览器会将它们看做javascrip解析。
  模板具有一个很容易理解的语法，可以使用html、普通文本和表达式，表达式通常被包含在两对或三对花括号里，可以包含变量或功能函数,模板需要编译之后才能使用。

image.png

2. Expressions

表达式中的任何html代码将会被自动忽略，这是一个非常实用的性能，但是有的时候我们需要解析html，那么就要用三个花括号{{{ }}}

image.png

3.Context

Handlebars利用了Mustache的强大特性，context就是其中之一。我们可以把需要传递的数据放在这个javascript对象中，使用#each、#with等方法可以方便的使用该对象的数据。

image.png

4.Helpers

Handlebars不允许在模板中使用javascript，而是提供了一些列的功能函数(helpers)，可以在模板中调用，方便代码重用和创造复杂模板。使用表达式调用helpers的格式类似如此，{{helpername}}，同时也可以传递参数，{{helpname 12345}}，开发新的helper，使用registerHelper function。

image.png

5. Block helpers

Block helpers像普通的功能函数一样，但是有开始和结束标签(类似于内置的#if、#each等)，可以修改包含的html的内容。创建更为复杂一些，当时功能更加强大。经常使用它们重复使用功能、创建一大段可重用的html等。同样使用Handlebars.registerHelper()创建block helper，不同的是我们需要使用第二参数，回调函数。

image.png

***********这只是基础部分，还要更深入的学习要访问官网*************。