入门
简单实例,了解数据格式,取值方式以及使用方法。
// 数据格式为 object
// object 里面的值可以是 object,也可以是数组、字符串等
var obj = {
title: 'Test Handlebars'
, author: {
name: 'Razy'
}
}
// 定义简单的 html 模板
// {{ key }} 是 Handlebars 默认语法
// 其中 key 是 object 的键值
var htmlTemplate = '<h1>{{title}}</h1><p>{{author.name}}</p>';
// 定义好的模板传入 Handlebars 编译,返回 template
// template 类型为 function
var template = Handlebars.compile( htmlTemplate );
// 最后 执行 template 方法,传入定义好的数据
// 返回结构 <h1>Test Handlebars</h1><p>Razy</p>
console.log( template( obj ) );
注意
:Handlebars取值写法一般是{{ key }}
,但如果 object 的值含有 html 代码,默认会自动将特殊字符转义,则只能当字符串处理。如果不想让 html 代码作字符串,则使用{{{ key }}}
。
不合法的标识使用[]
符号包装。比如:
// 数据格式为 object
// object 里面的值可以是 object,也可以是数组、字符串等
var obj = {
title: 'Test Handlebars'
, author: {
'#name': 'Razy'
}
}
// 定义简单的 html 模板
// {{ key }} 是 Handlebars 默认语法
// 其中 key 是 object 的键值
var htmlTemplate = '<h1>{{title}}</h1><p>{{author.[#name]}}</p>';
// 定义好的模板传入 Handlebars 编译,返回 template
// template 类型为 function
var template = Handlebars.compile( htmlTemplate );
// 最后 执行 template 方法,传入定义好的数据
// 返回结构 <h1>Test Handlebars</h1><p>Razy</p>
console.log( template( obj ) );