Hogan模板引擎简介_Hogan的安装和使用

Hogan模板引擎

简介：Hogan是一个非常简单的模板引擎，可以把它理解成Mustuche语法的编译器。Hogan简单到只有六七条语法，用hogan渲染html模板不用操作dom会更方便。

Hogan模板引擎 Hogan的安装和使用 Hogan语法 语法实例

Hogan的安装和使用

通过npm安装hogan:

npm install hogan.js –save-dev

CommonJs下的使用方式：
// 引入hogan
var hogan = require('hogan.js');

// 渲染所需模板
var template = '

Hey! I am {{name}}!

Hey! I am YUWA!

注意： npm里还有一个叫hogan的组件，是对hogan.js做的一个套壳的包装，同学们如果使用hogan出错的话，可以换成这里的hogan.js，还是原厂的好！除了引用名称，其他用法都是完全一样的。

Hogan语法

{{data}} 转义的变量 {{{data}}} 不转义的变量 {{#list}} {{/list}} 列表循环 / 真值判断 {{^list}} {{/list}} 空列表 / 非真值判断 {{.}} 枚举的当前元素 {{!}} 我是注释

语法实例

转义的变量：

{{name}}
// 数据：
{ name : 'YUWA' };

// 模板：

Hey! I am {{name}}!

Hey! I am YUWA!

说明：这就是读取一个变量，假如name是个html片段，这里会对html编码，如果放到dom里，就显示成了一段html代码。

不转义的变量：

{{{name}}}
// 数据：
{ name : 'YUWA' };

// 模板

Hey! I am {{{name}}}!

Hey! I am YUWA!

说明：大括号能怎么样？还是读取一个变量，只不过name是个html片段的话，这里不对html编码，放在dom里就是一段dom。

列表循环 / 真值判断：

{{#list}} {{/list}}
这个老复杂了，是个循环呢，吓死老衲了！当然#标记还可以当做bool型的判断。
// 数据:
{
    list : [
        {name : 'YUWA'},
        {name : 'JIM'}
    ],
    isRosen : true
}

// 数组型用法：
{{#list}}
    {{name}}
{{/list}}

// bool型用法：
{{#isYUWA}}我就是YUWA啊！{{/isYUWA}}

// 数组型结果：
RosenJIM

// bool型结果：
我就是YUWA啊！

空列表 / 非真值判断：

{{^list}} {{/list}}
这货和上一个是相反的，就是非的逻辑。如果列表为空，或者非真值都会进这个分支，其中包括false，null，undefined，0什么的。
// 数据:
{
    list : [],
    isYUWA : false
}

// 数组型用法：
{{^list}}
    这列表抠搜的，啥玩意都没有！
{{/list}}

// bool型用法：
{{^isYUWA}}谁是YUWA? 不认识！{{/isYUWA}}

// 数组型结果：
这列表抠搜的，啥玩意都没有！

// bool型结果：
谁是YUWA? 不认识！

枚举的当前元素：

{{.}}
代表枚举类型里的当前元素，枚举类型没有索引名，只能用{{.}}
// 数据:
{
    list : ['YUWA', 'JIM']
}

// {{.}}用法：
{{#list}}
    {{.}}
{{/list}}

// 结果：
YUWAJIM

注释：

{{!}}
我就是个注释，知道你们都不乐意用我
// 用法:
{{! 楼下是二货}}
我最厉害！

// 执行结果:
我最厉害！

加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl + Q 插入链接 Ctrl + L 插入代码 Ctrl + K 插入图片 Ctrl + G 提升标题 Ctrl + H 有序列表 Ctrl + O 无序列表 Ctrl + U 横线 Ctrl + R 撤销 Ctrl + Z 重做 Ctrl + Y