handlebars模板引擎

handlebars

javascript 模板引擎 原文链接

1. 模板注释
   

   Annotations
   语法：{{! 你需要输入的文本 }}

2. 基础语法
   Handlebars expressions
   语法：{{ data }}
   案例：

<script id="entry-template" type="text/x-handlebars-template">
    <div class="entry">
        <h1>{{title}}</h1>
        <div class="body">
        {{body}}
        </div>
    </div>
</script>
<script>
    // 模板可以放在文档任何位置,通过选择器获取
    var source   = $("#entry-template").html();
    // 通过handlebars 编译模板
    var template = Handlebars.compile(source);
    //获取数据
    var context = {
        title: "My New Post",
        body: "This is my first post!"
    };
    // 将数据传入模板里，类似函数传参
    // 返回一段带有相关数值的html代码
    template(context);
</script>

1. 块级表达式
   

   块级表达式能让你定义块级helpers，它能调用模板的一部分，并且使用与当前不同的上下文。下面以一个输出HTML列表的helper为例：

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

定义如下的上下文

{
  people: [
    {firstName: "Yehuda", lastName: "Katz"},
    {firstName: "Carl", lastName: "Lerche"},
    {firstName: "Alan", lastName: "Johnson"}
  ]
}

我们可以创建一个名为list的helper来生成HTML列表，这个helper接受people和options参数，options包含fn属性，可以调用上下文。

Handlebars.registerHelper('list', function(items, options) {
  var out = "<ul>";
  for(var i=0, l=items.length; i<l; i++) {
    out = out + "<li>" + options.fn(items[i]) + "</li>";
  }
  return out + "</ul>";
});

执行后，生成如下html

<ul>
  <li>Yehuda Katz</li>
  <li>Carl Lerche</li>
  <li>Alan Johnson</li>
</ul>

1. HTML 转义
   

   为安全起见，Handlebars表达式中的一些HTML字符将被转义，如果你不想让Handlebars转义字符，使用三个花括号{{{}}}

<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>

1. helper
   

   Helpers是Handlebars中最重要的概念，它能大大扩展Handlebars的使用范围，Helper自定义函数的形式将所需要的功能注册为表达式，然后可以在Handlebars中使用。

Handlebars提供了Handlebars.registerHelper方法来自定义Helper，同时也提供了一些常用的内建Helper。
块级 helpers 使用自定义的迭代器，其他的 helpers 都可以使用一个新的上下文来执行内部的代码块。 基础先定义一个简单的块级 helper，它只是简单的执行一下这块代码，就跟没有用这个helper一样。

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

这个 noop helper 接受一个 options 对象。这个对象有一个叫 options.fn 的方法，这个方法的用法就跟普通的编译过的 Hanldebars 模板的用法一样。所不同的就是，这个函数执行时会带有一个上下文，并且会返回一个字符串。

Handlebars.registerHelper('noop', function(options) {
  return options.fn(this);
});

Handlebars 在执行 helpers 的时候，总是会将 this 指向当前的上下文，所以，你只需用 this 来调用这一块代码，就可以在当前的上下文中求值了。

比如有如下模板：

<div class="post">
  <h1>By {{fullName author}}</h1>
  <div class="body">{{body}}</div>

  <h1>Comments</h1>

  {{#each comments}}
  <h2>By {{fullName author}}</h2>
  <div class="body">{{body}}</div>
  {{/each}}
</div>

其中上下文和helper如下：

var context = {
  author: {firstName: "Alan", lastName: "Johnson"},
  body: "I Love Handlebars",
  comments: [{
    author: {firstName: "Yehuda", lastName: "Katz"},
    body: "Me too!"
  }]
};
Handlebars.registerHelper('fullName', function(person) {
  return person.firstName + " " + person.lastName;
});

输出结果如下：

<div class="post">
  <h1>By Alan Johnson</h1>
  <div class="body">I Love Handlebars</div>

  <h1>Comments</h1>

  <h2>By Yehuda Katz</h2>
  <div class="body">Me Too!</div>
</div>

1. 在模板引擎中模拟console输出

{{log "look at me!"}}

原文链接讲的更加详细，链接在顶部。