<!-- 建立一个展现数据的容器section //-->
<section id="tutorial">
</section>
<!-- 导入jQuery类库 //-->
<script type='text/javascript' src="http://libs.baidu.com/jquery/1.7.1/jquery.min.js">
</script>
<!-- 导入handlebars 相干JS //-->
<script type='text/javascript' src="http://www.gbtags.com/gb/networks/uploads/87c22f7e-b475-4837-b781-eb74ae423041/js/handlebars-v1.3.0.js"></script>
<!-- 定义handlebars的模板 //-->
<script type="text/x-handlebars-template" id="tutorial-template">
<h1>{{title}}</h1>
<p>{{author}}</p>
<div>{{intro}}</div>
<div>{{{type}}}</div>
{{! 注重:修正双大括号为三大括号封闭HTML转义 - 此处为模板代码解释 }}
{{{generateContent this}}}
{{#listTutorials tutorials}}
{{title}} - 课程时长:{{duration}}分钟
{{/listTutorials}}
{{! 以下运用handlebars内建的辅佐要领each来轮回猎取课程目次 }}
{{#each tutorials}}
{{! 注重在each块表达式中当前的条理是list属性对应这层 }}
<p>
{{title}} - 课时:{{duration}}分钟 | 讲师:{{../info.author}}
</p>
{{/each}}
{{! 运用each来轮回课程信息对象属性 }}
{{#each author}}
<li>{{@key}}:{{this}}</li>
{{/each}}
{{#with author}}
作者:{{lastname}} {{firstname}}
{{/with}}
{{#if author}}
作者:{{author.lastname}} {{author.firstname}}
{{! if也能够合营else运用,以下 }}
{{else}}
作者:无
{{/if}}
{{log 'hello , gbtags.com'}}
{{! 运用each来轮回猎取课程列表数组 }}
<ul>
{{#each tutoriallist}}
<li>
{{! 这里运用@index能够猎取数组的索引index }}
编号 {{@index}} : {{title}} - {{duration}}分钟
</li>
{{/each}}
</ul>
</script>
<
script>
Handlebars.registerHelper('generateContent', function(jsondata) {
//以下组装页面须要展现的HTML内容
var content =
'
<h1>' + jsondata.title + '</h1>
'
+ '
<p>' + jsondata.author + '</p>
'
+ '
<div>' + jsondata.intro + '</div>
';
return content;
});
Handlebars.registerHelper('listTutorials',function(items, options) {
var out = "
<
ul>";
for(var i=0;i<items.length;i++){
out += "<li>" + options.fn(items[i]) + "</li>"; //注重这个options有个属性fn,能够用来直接挪用模板
}
return out + "</ul>";
});
$(function(){
var jsondata = {
'title':'handlebars运用入门',
'author': 'gbtags.com',
'intro': '基本JS模板引擎handlebars的初学者指南',
'type': '<span class="au"hot>双大括号会自动转义HTML代码,而三括号则不转义HTML</span>',
//下面定义一个新的数组属性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模板,末了处置惩罚数据成为页面内容
*模板保护更新异常简朴,而且代码清晰易于浏览,异常合适开辟庞杂逻辑的页面
*/
</script>
via :gbtags