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>"
      );
 });

 
    表達式嵌套

    {{outer-helper (inner-helper 'abc') 'def'}}

    先會執行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 路徑 （使用../ 查找上層做用域中的屬性）

    <p>{{./name}} or {{this/name}} or {{this.name}}</p>

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