理清Hogan与Mustache模板引擎

Hogan与Mustache

Hogan是一个非常简单的模板引擎，可以把它理解成Mustuche语法的编译器。

安装Hogan

npm install hogan.js --save-dev

Hogan用法

// 引入hogan
const hogan = require('hogan.js');
 
// 渲染所需模板
const tmpl = 引入模板文件
 
// 渲染所需数据
let renderData = {...}
 
// 模板的编译
const compiledTmpl = hogan.compile(tmpl);
 
// 模板的渲染
const renderHTML = compiledTmpl.render(renderData);

注意：renderData必须是对象，如果是数组，记得用{}包起来。

Hogan语法

{{#keyName}}…{{/keyName}}
相当于 keyName.forEach(function(){…}) 或 if(keyName){…}

// 数据:
{
    list : [
        {name : 'Rosen'},
        {name : 'JIM'}
    ],
    isRosen : true
}
 
// 数组型用法：
{{#list}}
    <span>{{name}}</span>
{{/list}}
// 数组型结果：
<span>Rosen</span><span>JIM</span>
 
// bool型用法：
{{#isRosen}}我就是Rosen啊！{{/isRosen}}
// bool型结果：
我就是Rosen啊！

语法：{{.}}表示枚举，循环输出整个数组

// 数据:
{
    list : ['Rosen', 'JIM']
}
 
// {{.}}用法：
{{#list}}
    <span>{{.}}</span>
{{/list}}
 
// 结果：
<span>Rosen</span>
<span>JIM</span>

语法：if(keyName){…}else{…}

{{#keyName}}
...
{{/keyName}}
{{^keName}}
...
{{/keyName}}

语法：注释

{{!这里是注释}}

更丰富的文档：
https://github.com/janl/mustache.js
http://mustache.github.io/mustache.5.html