Handlebarsjs學習筆記

標籤：style   http   io   ar   使用   sp   for   div   on   

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

    
        

Handlebarsjs學習筆記