摘要:兼容語法,在大多數情況下它可以讀取的語法并在你當前模板中使用。不要直接把它放在中否則的解析會改變模板內容。的路徑支持簡單的路徑,就像也支持嵌套的屬性,比如對象的屬性模板工作的對象這使得使用模板處理字符串成為可能。這種行為是新的,支持。
介紹
Handlebars 讓你能夠有能力高效地容易地創立語義化的模版。Handlebars兼容Mustache語法,在大多數情況下它可以讀取Mustache的語法并在你當前模板中使用。具體點擊這里
安裝下載
npm install --save handlebars
bower install --save handlebars
具體參考
開始使用Handlebars 模板看起來就像嵌套handlebars表達式的規范的HTML。
{{title}}
{{body}}
handlebars表達式: {{ cnt }}
你也可以通過標簽包裹handlebars表達式傳遞模板給瀏覽器:
你必須把模板放在標簽里,這很重要。不要直接把它放在HTML中否則HTML的解析會改變模板內容。
在JavaScript中,使用Handlebars.compile來編譯模板:
var source = $("#entry-template").html(); var template = Handlebars.compile(source); // ‘entry-template’就是包裹模板的script的id
注意這種方法在產品應用中不推薦使用。更好的方法是預編譯你的模版。這將使要求的運行庫更小,模板不必在瀏覽器中編譯,顯著地節省了時間。這在移動設備上尤為重要。
在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);
通過解析context處理handlebars模板獲取HTML內容:
var context = {title: "My New Post", body: "This is my first post!"}; var html = template(context);
輸出html:
HTML轉碼My New Post
This is my first post!
Handlebars 的轉碼HTML值通過{{expression}}返回. 如果你不想handlebars轉碼一個值的話,使用{{{expression}}}
{{title}}
{{{body}}}
上下文內容:
{ title: "All aboutTags", body: "
This is a post about
tags
" }
輸出:
All About
Tags
This is a post about
tags
Handlebars 不會轉義 Handlebars.SafeString. 如果你寫了輸出本身所含HTML的輔助 helper, 你其實想返回一個新的Handlebars.SafeString.在這種情況下,你想手動拼接參數.
Handlebars.registerHelper("link", function(text, url) { text = Handlebars.Utils.escapeExpression(text); url = Handlebars.Utils.escapeExpression(url); var result = "" + text + ""; return new Handlebars.SafeString(result); });
這樣可以避免字符串被轉碼,正確響應參數,即使你不適用{{{也不會被轉碼。
塊級表達式塊級表達式 允許你定義一個可以觸發一個與當前不同的上下文來替換模板的相應內容的helper。這些塊級輔助helper通過在helper的名字前加#并在結束時名字前加/:
{{#list people}}{{firstName}} {{lastName}}{{/list}}
渲染context:
{ people: [ {firstName: "Yehuda", lastName: "Katz"}, {firstName: "Carl", lastName: "Lerche"}, {firstName: "Alan", lastName: "Johnson"} ] }
我們會創建一個叫list的helper輸出HTML列表。該列表以people為第一個參數,哈希選項為第二個參數。這些選項里包含一條名為fn的屬性,在handlebars模板中通過這些屬性名獲取值
Handlebars.registerHelper("list", function(items, options) { var out = "
渲染結果:
塊級輔助helper有很多特點,例如可以創建一個else部分.因為當你調用options.fn(context)時塊級helper的內容已經被轉碼過,所以handlebars不會再去轉碼helper的內容。
handler 的路徑Handlebars 支持簡單的路徑,就像 Mustache.
{{name}}
Handlebars 也支持嵌套的屬性,比如對象的屬性.
{{title}}
By {{author.name}}
{{body}}
模板工作的對象context:
var context = { title: "My First Blog Post!", author: { id: 47, name: "Yehuda Katz" }, body: "My first post. Wheeeee!" };
這使得使用handlebars模板處理JSON字符串成為可能。內嵌的handlebars的路徑也包括../語法,相當于當前路徑的父級。
Comments
{{#each comments}}{{permalink}} {{#each comments}} {{../permalink}} {{#if title}} {{../permalink}} {{/if}} {{/each}}{{title}}
{{body}}{{/each}}
這里例子中引用了相同的permalink即使他們在不同的塊中。這種行為是新的,handlebars4支持。
Handlebars的內置塊表達式(Block helper)
each block helper
你可以使用內置的{{#each}} helper遍歷列表塊內容,用this來引用遍歷的元素 例如:
對應適用的json數據
{ name: ["html","css","javascript"] };
這里的this指的是數組里的每一項元素,和上面的Block很像,但原理是不一樣的這里的name是數組,而內置的each就是為了遍歷數組用的,更復雜的數據也同樣適用。
if else block helper
{{#if}}就你使用JavaScript一樣,你可以指定條件渲染DOM,如果它的參數返回false,undefined, null, "" 或者 [] (a "falsy" value), Handlebar將不會渲染DOM,如果存在{{#else}}則執行{{#else}}后面的渲染。
{{#if list}}
{{error}}
{{/if}}對應適用json數據
var data = {info:["HTML5","CSS3","WebGL"],"error":"數據取出錯誤"}
這里{{#if}}判斷是否存在list數組,如果存在則遍歷list,如果不存在輸出錯誤信息
unless block helper
{{#unless}}這個語法是反向的if語法也就是當判斷的值為false時他會渲染DOM 例如:
{{#unless data}}
{{error}}
{{/unless}}
with block helper
{{#with}}一般情況下,Handlebars模板會在編譯的階段的時候進行context傳遞和賦值。使用with的方法,我們可以將context轉移到數據的一個section里面(如果你的數據包含section)。 這個方法在操作復雜的template時候非常有用。
{{title}}
{{#with author}}By {{firstName}} {{lastName}}
{{/with}}
對應適用json數據
{ title: "My first post!", author: { firstName: "Charles", lastName: "Jolley" } }Handlebar的注釋(comments)
Handlebars也可以使用注釋寫法如下
{{! handlebars comments }}Handlebars的訪問(Path)
Handlebar支持路徑和mustache,Handlebar還支持嵌套的路徑,使得能夠查找嵌套低于當前上下文的屬性
可以通過.來訪問屬性也可以使用../,來訪問父級屬性。 例如:(使用.訪問的例子)
{{author.id}}
對應json數據
{ title: "My First Blog Post!", author: { id: 47, name: "Yehuda Katz" }, body: "My first post. Wheeeee!" };
例如:(使用../訪問)
{{#with person}}{{../company.name}}
{{/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" });
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/114210.html
摘要:兼容語法,在大多數情況下它可以讀取的語法并在你當前模板中使用。不要直接把它放在中否則的解析會改變模板內容。的路徑支持簡單的路徑,就像也支持嵌套的屬性,比如對象的屬性模板工作的對象這使得使用模板處理字符串成為可能。這種行為是新的,支持。 介紹 Handlebars 讓你能夠有能力高效地容易地創立語義化的模版。Handlebars兼容Mustache語法,在大多數情況下它可以讀取Musta...
摘要:前些天偷臺風的閑暇時寫了一個移動端音樂播放器,作為練手項目。有的歌詞周杰倫算什么男人格式是時間點時間歌詞創建映射首先以將歌詞字符串分割成以時間點文字的數組,但由于這樣分割之后最后一個元素是空的,所以用刪除最后一個元素。 這段時間公司一直在做一個PC的教育類單頁應用,龐大復雜,涉及非常多H5的知識,音頻就是其中的一部分。前些天偷臺風的閑暇時寫了一個移動端音樂播放器,作為練手項目。 在線地...
閱讀 3376·2021-11-22 13:53
閱讀 3411·2021-10-11 11:11
閱讀 932·2019-08-30 14:12
閱讀 1222·2019-08-29 17:16
閱讀 640·2019-08-29 16:45
閱讀 3349·2019-08-29 12:56
閱讀 670·2019-08-28 17:55
閱讀 2065·2019-08-26 13:24