Hogan模板

hogan模板引擎

github地址：https://github.com/twitter/hogan.js
参考作者： Rosen_Gao

语法

实例	解释
{{data}}	转译变量
{{{data}}}	不转译变量
{{!This is a comment}}	注释
{{#list}} html code{{/list}}	便利list列表
{{^list}} text{{/list}}	list列表不存在时显示的内容
{{.}}	枚举当前变量

安装使用

• {{{data}}} 无转译
• {{!data}} 注释
• {{}}数学公式
• UML序列图和流程图
• 离线写博客
• 导入导出Markdown文件
• 丰富的快捷键

---

安装使用

npm install hogan.js  --save-dev

使用：

common.js中使用，例如：

// 引入hogan
var hogan = require('hogan.js');

// 渲染所需模板
var template = '<div>Hey! I am {{name}}!</div>';

// 渲染所需数据
var data = {
    name : 'Rosen'
};

// 模板的编译
var compiledTemplate = hogan.compile(template);

// 模板的渲染
var result = compiledTemplate.render(data);

// 输出结果 
console.log(result); 

// output: <div>Hey! I am Rosen!</div>

{{.}}代表枚举类型里的当前元素，枚举类型没有索引名，只能用{{.}}:

// 数据:
{
    list : ['Rosen', 'JIM']
}

// {{.}}用法：
{{#list}}
    <span>{{.}}</span>
{{/list}}

// 结果：
<span>Rosen</span><span>JIM</span>

{{{name}}} 无转意:

// 数据：
{ name : '<span color="red">Rosen</span>' };

// 模板
<div>Hey! I am {{{name}}}!</div>

// 结果
<div>Hey! I am <span color="red">Rosen</span>!</div>