handlebarsjs模板使用
作者：陆金龙
发表时间：2017-09-23 17:51
html代码：
<body>
<div id="datas" class="content row">
<!--重复多个-->
</div>
<div id="datas2" class="content row">
<!--重复多个-->
</div>
</body>
js代码：
<script type="text/javascript" src="./javascripts/base/jquery.min.js"></script>
<script type="text/javascript" src="./javascripts/base/handlebars.js"></script>
<script id="tpl" type="text/x-handlebars-template">
{{#each persons}}
<div class="left col-6">
<div>{{this}}</div> <!--简单对象用this绑定-->
</div>
{{/each}}
</script>
<script id="tpl2" type="text/x-handlebars-template">
{{#each persons}}
<div class="left col-6">
<div>{{name}}</div>
<div>{{gender}}</div>
<div>{{age}}</div>
</div>
{{/each}}
</script>
<script >
function initData() {
var data = {
persons:[ "王铭","刘浩","艾力"];
};
var template = Handlebars.compile($("#tpl").html());
$("#datas").html(template(data));
var data2 = {
"persons": [
{
"name": "王铭",
"gender": "0",
"age": 30
},
{
"name": "刘浩",
"gender": "1",
"age": 22
},
{
"name": "艾力",
"gender": "0",
"age": 29
}
]
};
template = Handlebars.compile($("#tpl2").html();
$("#datas2").html(template(data2 ));
}
</script>