Handlebarsjs学习笔记

handlebarsjs官网（http://handlebarsjs.com/）

1.引入模板

在html页面中添加

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

    var source = $("#entry-template").html();     // 获取模板内容

    var template = Handlebars.compile(source);     //将模板编译成模板函数

    var htmlStr = template (context) ;     //  传入上下文对象 输出html字符串

    //模板函数可传入一个可选对象作为第二参数

    var htmlStr = template (context,opt) ;

data:传入此对象，用于自定义私有变量
   helpers：出入助手，在运行时会替换权限同名的助手
   partials： Pass in to provide custom partials in addition to the globally defined partials.

   预编译

   npm install handlebars -g

   handlebars <input> -f <output>

   编译器会将inputFile(如person.hbs)编译成模板函数，然后插入到Handlebars.templates中即Handlebars.templates.person

Handlebars.templates.person(context, options)

如果使用预编译的话可以直接引入handlebarjs的原型依赖库
   <script src="/libs/handlebars.runtime.js"></script>

   预编译可选参数
   handlebars <input> -f <output> -k each -k if -k unless

　　(预编译相关 http://www.zfanw.com/blog/handlebars-js-precompilation.html ）

2.表达式

<h1>{{title}}</h1>     // 会在当前上下文中寻找title属性

<h1>{{article.title}}</h1>     会在当前上下文中寻找属性article，然后在查找结果中找title属性

<h1>{{article/title}}</h1>  // 也可以这样使用（此用法不建议使用 已废弃）

标识符不能是 Whitespace ! " # % & ' ( ) * + , . / ; < = > @ [ \ ] ^ ` { | } ~

如果想引用一个属性但是它的名称不是合法的标识符，可以用[]访问，比如：

{#each articles.[10].[#comments]}}

    <h1>{{subject}}</h1>

    <div> {{body}} </div>

{{/each}}

传入each的参数 articles.[10].[#comments] 等价于js对象 articles[10]['#comments']

   HTML转义 {{{ expression }}} 使用3个大括号可防止html自动转义

    {{{link story}}}

Handlebars.registerHelper('link', function(object) {

        var url = Handlebars.escapeExpression(object.url),          // 使用escapeExpression方法 防止自动转义

          text = Handlebars.escapeExpression(object.text);

        return new Handlebars.SafeString(

        "<a href='" + url + "'>" + objecttext + "</a>"

 );});

{{{link "See more..." href=story.url class="story"}}} // 助手添加键值对参数可通过助手的最后一个参数options.hash获取

Handlebars.registerHelper('link', function(text, options) {

      var attrs = [];

      for (var prop in options.hash) {

        attrs.push(

            Handlebars.escapeExpression(prop) + '="'

            + Handlebars.escapeExpression(options.hash[prop]) + '"');

      }

      return new Handlebars.SafeString(

        "<a " + attrs.join(" ") + ">" + Handlebars.escapeExpression(text) + "</a>"

      );

 });

表达式嵌套

先会执行inner-helper助手然后将其返回结果作为outer-helper的第一个参数

空格控制（使用 ~ 去掉左右的空格）

 {{#each nav ~}}

      <a href="{{url}}">

        {{~#if test}}

          {{~title}}

        {{~^~}}

          Empty

        {{~/if~}}

      </a>

{{~/each}}

上下文对象

{

      nav: [

        {url: 'foo', test: true, title: 'bar'},

        {url: 'bar'}

      ]

}

输出结果

<a href="foo">bar</a><a href="bar">Empty</a>

3.块级表达式（会改变上下文对象）

<div class="entry">

        <h1>{{title}}</h1>

        <div class="body">

            {{#noop}}{{body}}

            {{/noop}}

        </div>

 </div>

Handlebars.registerHelper('noop', function(options) {

        return options.fn(this);     // 可以在助手里直接使用 this (指代当前上下文对象)

    });

Handlebars.registerHelper('if', function(conditional, options) {

       if(conditional) {

           return options.fn(this);

       } else {

            return options.inverse(this);

       }

});

助手函数默认有最后一个参数options，options.fn 会渲染助手的内容，如果助手含有else部分可以调用options.inverse（context）

4.handerbarjs 路径 （使用../ 查找上层作用域中的属性）

5.注释

{{！-- log --}} 或 {{！ log }}

6.常用api

a.添加助手

Handlebars.registerHelper('foo', function() {});

// 一次性添加多个助手

Handlebars.registerHelper({

    foo: function() {

    },

    bar: function() {

    }

});

b.注销助手

 Handlebars.unregisterHelper('foo');

c.安全字符串转化，防止字符串注入 // 防止文本被自动转义

 new Handlebars.SafeString('<div>HTML Content!</div>')

d.html转义
       Handlebars.escapeExpression(string)
       原样输出html内容，将&, <, >, ", ', `转化成等价的实体字符串

   e.判断是否是数组的第一个元素@first   (@last 判断是否是数组的最后一个元素)

{{#each array}}

    {{#if @first}}

        First!

    {{/if}}

{{/each}}

{{#each array}}

    {{#if @last}}

        Last :(

    {{/if}}

{{/each}}

f.通过 @index 可在模板中直接使遍历数组的下标

{{#each array}}

    {{@index}}

{{/each}}

g.通过@key遍历对象的属性

{{#each array}}

    {{@key}}

{{/each}}