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