Handlebars.js 模板引擎-有解無憂

介紹

Handlebars 是 JavaScript 一個語意模板庫，通過對view和data的分離來快速構建Web模板，它采用"Logic-less template"（無邏輯模版）的思路，在加載時被預編譯，而不是到了客戶端執行到代碼時再去編譯，這樣可以保證模板加載和運行的速度，Handlebars兼容Mustache，你可以在Handlebars中匯入Mustache模板，

使用與安裝

Handlebars的安裝非常簡單，你只需要從Github下載最新版本，你也可訪問下面網址獲取最新資訊：http://handlebarsjs.com，
目前handlebars.js已經被許多專案廣泛使用了，handlebars是一個純JS庫，因此你可以像使用其他JS腳本一樣用script標簽來包含handlebars.js

<script type="text/javascript" src="https://www.cnblogs.com/88223100/p/.js/handlebars.js"></script>

基本語法

Handlebars expressions 是handlebars模板中最基本的單元，使用方法是加兩個花括號{{value}}, handlebars模板會自動匹配相應的數值，物件甚至是函式，
例如：

<div >  
    <h1>{{name}}</h1>
    <p>{{content}}</p>
</div>

你可以單獨建立一個模板,ID（或者class）和type很重要，因為你要用他們來獲取模板內容例如：

<script id="tpl" type="text/x-handlebars-template">  
<div >  
        <h1>{{title}}</h1>
        <p>{{content.title}}</p>
    </div>
</script>

handlebars會根據背景關系來自動對運算式進行匹配，如果匹配項是個變數，則會輸出變數的值，如果匹配項是個函式，則函式會被呼叫，
如果沒找到匹配項，則沒有輸出，運算式也支持點運算子，因此你可以使用{{content.title}}這樣的形式來呼叫嵌套的值或者方法， handlebars會根據當前背景關系輸出content變數的title屬性的值，

在JavaScript中，使用Handlebars.compile()方法來預編譯模板例如：(這是一套規則)

//用jquery獲取模板
    var tpl   =  $("#tpl").html();
    //原生方法
    var source = document.getElementById('#tpl').innerHTML;
    //預編譯模板
    var template = Handlebars.compile(source);
    //模擬json資料
    var context = { name: "zhaoshuai", content: "learn Handlebars"};
    //匹配json內容
    var html = template(context);
    //輸入模板
    $(body).html(html);

Handlebar的運算式

Block運算式

有時候當你需要對某條運算式進行更深入的操作時，Blocks就派上用場了，在Handlebars中，你可以在運算式后面跟隨一個#號來表示Blocks，然后通過{{/運算式}}來結束Blocks，如果當前的運算式是一個陣列，則Handlebars會“自動展開陣列”，并將Blocks的背景關系設為陣列中的元素，例如：

<ul>  
{{#programme}}
    <li>{{language}}</li>
{{/programme}}
</ul>

有以下json資料

{
  programme: [
    {language: "JavaScript"},
    {language: "HTML"},
    {language: "CSS"}
  ]
}

編譯模板代碼同上…… 上面的代碼會自動匹配programme資料并展開資料，渲染DOM后就是這樣的

<ul>  
  <li>JavaScript</li>
  <li>HTML</li>
  <li>CSS</li>
</ul>

Handlebars的內置塊運算式（Block helper）

1.each block helper

你可以使用內置的{{#each}} helper遍歷串列塊內容，用this來參考遍歷的元素例如：

<ul>  
    {{#each name}}
        <li>{{this}}</li>
    {{/each}}
</ul>

對應適用的json資料

{
    name: ["html","css","javascript"]
};

這里的this指的是陣列里的每一項元素，和上面的Block很像，但原理是不一樣的這里的name是陣列，而內置的each就是為了遍歷陣列用的，更復雜的資料也同樣適用，

2.if else block helper

{{#if}}就你使用JavaScript一樣，你可以指定條件渲染DOM，如果它的引數回傳false，undefined, null, "" 或者 [] (a "falsy" value), Handlebar將不會渲染DOM，如果存在{{#else}}則執行{{#else}}后面的渲染
例如：

{{#if list}}
<ul id="list">  
    {{#each list}}
        <li>{{this}}</li>
    {{/each}}
</ul>  
{{else}}
    <p>{{error}}</p>
{{/if}}

對應適用json資料

var data =https://www.cnblogs.com/88223100/p/ {  
    info:['HTML5','CSS3',"WebGL"],
    "error":"資料取出錯誤"
}

這里{{#if}}判斷是否存在list陣列，如果存在則遍歷list，如果不存在輸出錯誤資訊

3.unless block helper

{{#unless}}這個語法是反向的if語法也就是當判斷的值為false時他會渲染DOM 例如：

{{#unless data}}
<ul id="list">  
    {{#each list}}
        <li>{{this}}</li>
    {{/each}}
</ul>  
{{else}}
    <p>{{error}}</p>
{{/unless}}

4.with block helper

{{#with}}一般情況下，Handlebars模板會在編譯的階段的時候進行context傳遞和賦值，使用with的方法，我們可以將context轉移到資料的一個section里面（如果你的資料包含section），這個方法在操作復雜的template時候非常有用，

<div >  
  <h1>{{title}}</h1>
  {{#with author}}
  <h2>By {{firstName}} {{lastName}}</h2>
  {{/with}}
</div>

對應適用json資料

{
  title: "My first post!",
  author: {
    firstName: "Charles",
    lastName: "Jolley"
  }
}

Handlebar的注釋（comments）

Handlebars也可以使用注釋寫法如下

{{! handlebars comments }}

Handlebars的訪問（Path）

Handlebar支持路徑和mustache,Handlebar還支持嵌套的路徑，使得能夠查找嵌套低于當前背景關系的屬性
可以通過.來訪問屬性也可以使用../,來訪問父級屬性，例如:（使用.訪問的例子）

<h1>{{author.id}}</h1>

對應json資料

{
  title: "My First Blog Post!",
  author: {
    id: 47,
    name: "Yehuda Katz"
  },
  body: "My first post. Wheeeee!"
  };

例如：（使用../訪問）

{{#with person}}
    <h1>{{../company.name}}</h1>
{{/with}}

對應適用json資料

{
    "person":
    { "name": "Alan" },
        company:
    {"name": "Rad, Inc." }
};

自定義helper

Handlebars，可以從任何背景關系可以訪問在一個模板，你可以使用Handlebars.registerHelper()方法來注冊一個helper，

除錯技巧

把下面一段"debug helper"加載到你的JavaScript代碼里,然后在模板檔案里通過{{debug}}或是{{debug someValue}}方便除錯資料

Handlebars.registerHelper("debug", function(optionalValue) {  
  console.log("Current Context");
  console.log("====================");
  console.log(this);
  if (optionalValue) {
    console.log("Value");
    console.log("====================");
    console.log(optionalValue);
  }
});

handlebars的jquery插件

(function($) {
    var compiled = {};
    $.fn.handlebars = function(template, data) {
        if (template instanceof jQuery) {
            template = $(template).html();
        }
    compiled[template] = Handlebars.compile(template);
    this.html(compiled[template](data));
    };
})(jQuery);
$('#content').handlebars($('#template'), { name: "Alan" });

Handlebars 中文檔案 | Handlebars 中文網

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/285934.html

標籤：JavaScript

上一篇：淺析mvvm模式和mvc模式的區別和聯系

下一篇：JavaScript 11 節點