handlebars 基础

//改类型
<script id="template" type="text/x-handlebars-template">
<p>hello, {{name}}</p> //2个花括号代表变量 3个花括号代表解析真正的html标签
<p>{{hello}}</p>

//循环开始
{{#each listOfStudents}}
<tr>
<td>{{name}}</td>
<td>{{age}}</td>
<td>{{gender}}</td>
</tr>
//循环结束

// 获取模板的源代码
var source = document.getElementById('template').innerHTML;
// 把模板的源代码，编译成模板对象
var template = Handlebars.compile(source);
// 创建helper
Handlebars.registerHelper('circle', function(data) {
return '<div class="big"><div class="small">' + data + '</div></div>';

// 告诉系统，这个返回值要解析成真正的标签
var obj = new Handlebars.SafeString('<div class="big"><div class="small">' + data + '</div></div>');
return obj;

// 通过模板对象，获取最终html代码
var html = template({
listOfStudents: [
{
name: 'bob',
age: 20,
gender: 'male'
},
{
name: 'tom',
age: 22,
gender: 'male'
},
{
name: 'Hellen',
age: 20,
gender: 'female'
}
]
});
// 把html代码插入到网页中去
document.getElementById('container').innerHTML = html;

转载于:https://www.cnblogs.com/cswzl/p/6036186.html