Hogan模板引擎

Hogan模板引擎

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

Hogan的安装和使用

通过npm安装hogan:

npm install hogan.js –save-dev

CommonJs下的使用方式：// 引入hoganvar hogan = require('hogan.js');// 渲染所需模板var template = '<div>Hey! I am {{name}}!</div>';// 渲染所需数据var data = {    name : 'YUWA'};// 模板的编译var compiledTemplate = hogan.compile(template);// 模板的渲染var result = compiledTemplate.render(data);// 输出结果 console.log(result); // output: <div>Hey! I am YUWA!</div>

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

Hogan语法

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

语法实例

转义的变量：

{{name}}// 数据：{ name : 'YUWA' };// 模板：<div>Hey! I am {{name}}!</div>// 结果：<div>Hey! I am YUWA!</div>

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

不转义的变量：

{{{name}}}// 数据：{ name : '<span color="red">YUWA</span>' };// 模板<div>Hey! I am {{{name}}}!</div>// 结果<div>Hey! I am <span color="red">YUWA</span>!</div>

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

列表循环 / 真值判断：

{{#list}} {{/list}}这个老复杂了，是个循环呢，吓死老衲了！当然#标记还可以当做bool型的判断。// 数据:{    list : [        {name : 'YUWA'},        {name : 'JIM'}    ],    isRosen : true}// 数组型用法：{{#list}}    <span>{{name}}</span>{{/list}}// bool型用法：{{#isYUWA}}我就是YUWA啊！{{/isYUWA}}// 数组型结果：<span>Rosen</span><span>JIM</span>// bool型结果：我就是YUWA啊！

空列表 / 非真值判断：

{{^list}} {{/list}}这货和上一个是相反的，就是非的逻辑。如果列表为空，或者非真值都会进这个分支，其中包括false，null，undefined，0什么的。// 数据:{    list : [],    isYUWA : false}// 数组型用法：{{^list}}    这列表抠搜的，啥玩意都没有！{{/list}}// bool型用法：{{^isYUWA}}谁是YUWA? 不认识！{{/isYUWA}}// 数组型结果：这列表抠搜的，啥玩意都没有！// bool型结果：谁是YUWA? 不认识！

枚举的当前元素：

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

注释：

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

摘自http://www.imooc.com/article/18493

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