摘要：创建一个展示数据的容器导入类库导入相关定义的模板注意修改双大括号为三大括号关闭转义此处为模板代码注释课程时长分钟以下使用内建的辅助方法来循环获取课程目录注意在块表达式中当前的层次是属性对应这层
<
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
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/87597.html
