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