Handlebars.js 使用入门

使用Handlebars，你可以轻松创建语义化模板，Mustache模板和Handlebars是兼容的，所以你可以将Mustache导入Handlebars以使用 Handlebars 强大的功能。

1、开始

Handlebars模板看起来和HTML一样，只是嵌入了 handlebars 表达式

div class="entry">
  <h1>{
   {
   title}}</h1>
  <div class="body">
    {
   {
   body}}
  </div>
</div>

handlebars表达式以{ { 开头，中间写一些内容，以}}结尾。

你可以使用<script>标签引入handlebars模板：

<script id="entry-template" type="text/x-handlebars-template">
  template content
</script>

在javascript中使用Handlebars.compile编译模板：

var source = $("#entry-template").html();
var template = Handlebars.compile(source);

你也可以预编译你的模板，然后只需引入更小的运行时库（handlebars.runtime.js），避免在浏览器中编译，提高性能，这在移动设备中显得更重要。

传入数据上下文（context），handlebars会执行并生成HTML：

var context = {title: "My New Post", body: "This is my first post!"}
var html    = template(context);

得到的结果是：

<div class="entry">
  <h1>My New Post</h1>
  <div class="body">
    This is my first post!
  </div>
</div>

---

2、HTML编码

在handlebars里，{ {expression}}会返回一个经过编码的HTML，如果你不希望被编码，可以使用{ { {

<div class="entry">
  <h1>{
   {
   title}}</h1>
  <div class="body">
    {
   {
   {
   body}}}
  </div>
</div>

使用这样的数据上下文：

{
  title: "All about <p> Tags",
  body: "<p>This is a post about &lt;p&gt; tags</p>"
}

结果是：

<div class="entry">
  <h1>All About &lt;p&gt; Tags</h1>
  <div class="body">
    <p>This is a post about &lt;p&gt; tags</p>
  </div>
</div>

handlebars不会编码Handlebars.SafeString。如果你自定义一个helper，返回一段HTML代码，你需要返回new Handlebars.SafeString(result)。此时，你需要手动对内容进行编码：

Handlebars.registerHelper('link', function(text, url) {
   
    text = Handlebars.Utils.escapeExpression(text);
    url  = Handlebars.Utils.escapeExpression(url);

    var result = '<a href="' + url + '">' + text + '</a>';

    return new Handlebars.SafeString(result);
});

这里将会对传入的参数进行编码，返回值是“安全的”，所以就算你不使用{ { { ，handlebars也不会再次编码了。

---

3、块表达式

块表达式允许你定义helper，用不同的数据上下文（context）调用一段模板。下面我们定义一个生成列表的helper：

{
   {
   #list people}}{
   {
   firstName}} {
   {
   lastName}}{
   {
   /list}}

如果我们的数据是这样的：

{
  people: [
    {firstName: "Yehuda", lastName: "Katz"},
    {
   firstName: