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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值