入门

简单实例,了解数据格式,取值方式以及使用方法。

// 数据格式为 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 ) );

results matching ""

    No results matching ""