hogan.js学习笔记分享

前段时间学习了一下模板引擎hogan.js，主要用于变量替换和循环，在网上看了几篇文章，现在做个整理跟大家分享一下。

一、安装和使用

安装：

npm install hogan.js --save-dev
复制代码

使用：

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

// 要渲染的模板
var template = '<div>Hello my name is {{name}}</div>';

// 要渲染的数据
var data = {
    name: 'Jack'
}

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

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

// 输出 console.log(output)
<div>Hello my name is Jack</div>
复制代码

二、语法

1. {{name}} 变量替换并编译

// 数据
{name: 'Jack'}

// 模板
<div>Hello my name is {{name}}</div>

// 结果
<div>Hello my name is Jack</div>

复制代码

2. {{{name}}} 变量替换不编译

// 数据
{name: '<span color="red">Jack</span>'}

// 模板
<div>Hello my name is {{name}}</div>

// 结果
<div>Hello my name is <span color="red">Jack</span></div>
复制代码

3. {{#list}} {{/list}} 列表循环或真值判断

// 数据
{
    list: [
        {name: 'Jack'},
        {name: 'Tom'},
        {name: 'Marry'}
    ],
    isJack: true
}

// 列表循环
{{#list}}
    <div>my name is {{name}}</div>
{{/list}}

// 结果
<div>my name is Jack</div>
<div>my name is Tom</div>
<div>my name is Marry</div>

//真值判断
{{#isJack}}
   我是Jack
{{/isJack}}

// 结果
我是Jack
复制代码

4. {{^list}} {{/list}} 空列表或非真值(false null undefined 0 '' NaN)

// 数据
{
    list: [],
    isJack: false
}

// 空列表
{{^list}}
    这是一个空列表！
{{/list}}

// 结果
这是一个空列表！

//非真值判断
{{^isJack}}
   不认识Jack
{{/isJack}}

// 结果
不认识Jack
复制代码

5. {{.}} 枚举类型没有索引名时，只能用{{.}}，表示枚举类型的当前元素

//数据
{
    list: ['Jack', 'Tom', 'Marry']
}

// 用法
{{#list}}
    <div>{{.}}</div>
{{/list}}

// 结果
<div>Jack</div>
<div>Tom</div>
<div>Marry</div>
复制代码

6. {{!}} 注释

// 用法
{{!这是一个注释}}
<span>Hello Jack</span>
复制代码

三、总结

1. {{name}} 编译的变量
2. {{{name}}} 不编译的变量
3. {{#list}} {{/list}} 列表循环或真值判断
4. {{^list}} {{/list}} 空列表或非真值判断
5. {{.}} 枚举的当前元素
6. {{!}} 注释