摘要：創(chuàng)建一個(gè)展示數(shù)據(jù)的容器導(dǎo)入類庫導(dǎo)入相關(guān)定義的模板注意修改雙大括號(hào)為三大括號(hào)關(guān)閉轉(zhuǎn)義此處為模板代碼注釋課程時(shí)長(zhǎng)分鐘以下使用內(nèi)建的輔助方法來循環(huán)獲取課程目錄注意在塊表達(dá)式中當(dāng)前的層次是屬性對(duì)應(yīng)這層
<
script>
Handlebars.registerHelper("generateContent", function(jsondata) {
//以下組裝頁面需要展示的HTML內(nèi)容
var content =
"
" + jsondata.title + "
"
+ "
" + jsondata.author + "
"
+ "
" + jsondata.intro + "
";
return content;
});
Handlebars.registerHelper("listTutorials",function(items, options) {
var out = "
<
ul>";
for(var i=0;i"; //注意這個(gè)options有個(gè)屬性fn，可以用來直接調(diào)用模板
}
return out + "";
});
$(function(){
var jsondata = {
"title":"handlebars使用入門",
"author": "gbtags.com",
"intro": "基礎(chǔ)JS模板引擎handlebars的初學(xué)者指南",
"type": "雙大括號(hào)會(huì)自動(dòng)轉(zhuǎn)義HTML代碼，而三括號(hào)則不轉(zhuǎn)義HTML",
//下面定義一個(gè)新的數(shù)組屬性tutorials
"tutorials":[
{"title": "第一節(jié)：handlebar基礎(chǔ)","duration":"5"},
{"title": "第二節(jié)：handlebar 表達(dá)式","duration":"3"},
{"title": "第三節(jié)：handlebar 輔助方法","duration":"1"},
{"title": "第四節(jié)：handlebar 內(nèi)建輔助方法","duration":"6"}
],
"author": {
"firstname": "terry",
"lastname": "li"
},
tutoriallist: [
{title:"Handlebars介紹",duration: 5},
{title:"Handlebars基礎(chǔ)",duration: 3},
{title:"Handlebars內(nèi)建塊表達(dá)式",duration: 2},
{title:"Handlebars實(shí)際案例",duration: 8}
]
};
// 獲取模板中定義的HTML結(jié)構(gòu)
var source = $("#tutorial-template").html();
// 編譯HTML生成對(duì)應(yīng)的JS模板
var template = Handlebars.compile(source);
// 使用JS模板處理需要顯示的JSON數(shù)據(jù), 生成對(duì)應(yīng)的HTML內(nèi)容
var html = template(jsondata);
// 添加生成的HTML內(nèi)容到對(duì)應(yīng)頁面元素中
$("#tutorial").html(html);
});
/*
*總結(jié)：
*可以看到使用handlebars來生成對(duì)應(yīng)頁面內(nèi)容，只需要定義一個(gè)HTML模板
*通過handlebar來獲取HTML模板并且編譯成JS模板，最后處理數(shù)據(jù)成為頁面內(nèi)容
*模板維護(hù)更新非常簡(jiǎn)單，并且代碼清楚易于閱讀，非常適合開發(fā)復(fù)雜邏輯的頁面
*/
via :gbtags
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87597.html
