必威电竞|足球世界杯竞猜平台

handlebars
來(lái)源：互聯(lián)網(wǎng)

Handlebars是ECMAScript一個(gè)語(yǔ)義模板庫(kù)，通過(guò)對(duì)view和data的分離來(lái)快速構(gòu)建Web模板。它采用"Logic-lesstemplate"（無(wú)邏輯模版）的思路，在加載時(shí)被預(yù)編譯，而不是到了客戶端執(zhí)行到代碼時(shí)再去編譯，這樣可以保證模板加載和運(yùn)行的速度。Handlebars兼容Mustache，你可以在Handlebars中導(dǎo)入Mustache模板。

使用與安裝

Handlebars的安裝非常簡(jiǎn)單，你只需要從GitHub下載最新版本，你也可訪問(wèn)下面網(wǎng)址獲取最新信息：http://handlebarsjs.com。

目前handlebars.js已經(jīng)被許多項(xiàng)目廣泛使用了，handlebars是一個(gè)純JS庫(kù)，因此你可以像使用其他JS腳本一樣用script標(biāo)簽來(lái)包含handlebars.js

ECMAScript"src=".js/handlebars.js">

基本語(yǔ)法

Handlebarsexpressions是handlebars模板中最基本的單元，使用方法是加兩個(gè)花括號(hào){{value}},handlebars模板會(huì)自動(dòng)匹配相應(yīng)的數(shù)值，對(duì)象甚至是函數(shù)。

例如：

{{name}}

{{content}}

你可以單獨(dú)建立一個(gè)模板,ID（或者class）和type很重要，因?yàn)槟阋盟麄儊?lái)獲取模板內(nèi)容例如：

{{title}}

{{content.title}}

handlebars會(huì)根據(jù)上下文來(lái)自動(dòng)對(duì)表達(dá)式進(jìn)行匹配，如果匹配項(xiàng)是個(gè)變量，則會(huì)輸出變量的值，如果匹配項(xiàng)是個(gè)函數(shù)，則函數(shù)會(huì)被調(diào)用。

如果沒(méi)找到匹配項(xiàng)，則沒(méi)有輸出。表達(dá)式也支持點(diǎn)操作符，因此你可以使用{{content.title}}這樣的形式來(lái)調(diào)用嵌套的值或者方法，handlebars會(huì)根據(jù)當(dāng)前上下文輸出content變量的title屬性的值。

在ECMAScript中，使用Handlebars.compile()方法來(lái)預(yù)編譯模板例如：(這是一套規(guī)則)

//用jquery獲取模板

vartpl=$("#tpl")HTML();

//原生方法

varsource=document.getElementById('#tpl').innerHTML;

//預(yù)編譯模板

vartemplate=Handlebars.compile(source);

//模擬json數(shù)據(jù)

varcontext={name:"zhaoshuai",content:"learnHandlebars"};

//匹配json內(nèi)容

varhtml=template(context);

//輸入模板

$(body)HTML(html);

表達(dá)式

Block表達(dá)式

有時(shí)候當(dāng)你需要對(duì)某條表達(dá)式進(jìn)行更深入的操作時(shí)，Blocks就派上用場(chǎng)了，在Handlebars中，你可以在表達(dá)式后面跟隨一個(gè)＃號(hào)來(lái)表示Blocks，然后通過(guò){{/表達(dá)式}}來(lái)結(jié)束Blocks。如果當(dāng)前的表達(dá)式是一個(gè)數(shù)組，則Handlebars會(huì)“自動(dòng)展開(kāi)數(shù)組”，并將Blocks的上下文設(shè)為數(shù)組中的元素。例如：

有以下json數(shù)據(jù)

{programme:[{language:"ECMAScript"},{language:"HTML"},{language:"層疊樣式表"}]}

編譯模板代碼同上……上面的代碼會(huì)自動(dòng)匹配programme數(shù)據(jù)并展開(kāi)數(shù)據(jù)，渲染DOM后就是這樣的

內(nèi)置塊表達(dá)式

（Blockhelper）

1.eachblockhelper

你可以使用內(nèi)置的{{#each}}helper遍歷列表塊內(nèi)容，用this來(lái)引用遍歷的元素例如：

對(duì)應(yīng)適用的json數(shù)據(jù)

{name:["HTML","層疊樣式表","ECMAScript"]};

這里的this指的是數(shù)組里的每一項(xiàng)元素，和上面的Block很像，但原理是不一樣的這里的name是數(shù)組，而內(nèi)置的each就是為了遍歷數(shù)組用的，更復(fù)雜的數(shù)據(jù)也同樣適用。

2.ifelseblockhelper

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

例如：

{{#iflist}}{{#eachlist}}

  • {{this}}
    • {{/each}}{{else}}

    {{error}}

    {{/if}}

    對(duì)應(yīng)適用json數(shù)據(jù)

    vardata={info:['html5','CSS3',"WebGL"],"error":"數(shù)據(jù)取出錯(cuò)誤"}

    這里{{#if}}判斷是否存在list數(shù)組，如果存在則遍歷list，如果不存在輸出錯(cuò)誤信息

    3.unlessblockhelper

    {{#unless}}這個(gè)語(yǔ)法是反向的if語(yǔ)法也就是當(dāng)判斷的值為false時(shí)他會(huì)渲染DOM例如：

    {{#unlessdata}}{{#eachlist}}

  • {{this}}
    • {{/each}}{{else}}

    {{error}}

    {{/unless}}

    4.withblockhelper

    {{#with}}一般情況下，Handlebars模板會(huì)在編譯的階段的時(shí)候進(jìn)行context傳遞和賦值。使用with的方法，我們可以將context轉(zhuǎn)移到數(shù)據(jù)的一個(gè)section里面（如果你的數(shù)據(jù)包含section）。這個(gè)方法在操作復(fù)雜的template時(shí)候非常有用。

    {{title}}

    {{#withauthor}}

    By{{firstName}}{{lastName}}

    {{/with}}

    對(duì)應(yīng)適用json數(shù)據(jù)

    {title:"Myfirstpost!",author:{firstName:"Charles",lastName:"Jolley"}}

    Handlebar的注釋（comments）

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

    {{!handlebarscomments}}

    Handlebars的訪問(wèn)（Path）

    Handlebar支持路徑和mustache,Handlebar還支持嵌套的路徑，使得能夠查找嵌套低于當(dāng)前上下文的屬性

    可以通過(guò)。來(lái)訪問(wèn)屬性也可以使用../,來(lái)訪問(wèn)父級(jí)屬性。例如:（使用。訪問(wèn)的例子）

    <H1>{{author.id}}

    對(duì)應(yīng)json數(shù)據(jù)

    {title:"MyFirstBlogPost!",author:{id:47,name:"YehudaKatz"},body:"Myfirstpost.Wheeeee!"};

    例如：（使用../訪問(wèn)）

    {{#withperson}}

    {{../company.name}}

    {{/with}}

    對(duì)應(yīng)適用json數(shù)據(jù)

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

    自定義helper

    Handlebars，可以從任何上下文可以訪問(wèn)在一個(gè)模板，你可以使用Handlebars.registerHelper()方法來(lái)注冊(cè)一個(gè)helper。

    調(diào)試技巧

    把下面一段"debughelper"加載到你的ECMAScript代碼里，然后在模板文件里通過(guò){{debug}}或是{{debugsomeValue}}方便調(diào)試數(shù)據(jù)

    Handlebars.registerHelper("debug",函數(shù)(optionalValue){console.log("CurrentContext");console.log("====================");console.log(this);if(optionalValue){console.log("Value");console.log("====================");console.log(optionalValue);}});

    handlebars的jquery插件

    (函數(shù)($){varcompiled={};$.fn.handlebars=function(template,data){if(templateinstanceofjQuery){template=$(template)HTML();}compiled[template]=Handlebars.compile(template);this.html(compiled[template](data));};})(jQuery);$('#content').handlebars($('#template'),{name:"Alan"});

    參考資料 >

    生活家百科家居網(wǎng)