Hogan模板引擎

点击查看原文

通过npm安装

npm install hogan.js --save-dev

Demo1

{{变量}}:读取变量，并且对html进行编码

{{{变量}}}}：读取变量，不对html进行编码

var hogan = require("hogan.js");//1.引入已经安装的hogan模块

//2.定义渲染模板{{}}变量对应着渲染数据对象的属性
var  template = "<div>Hi {{name}}</div>";

//3.渲染时所需的数据
var data = {
    name : "Mark"
};

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

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

console.log(resultHtml);

控制台的输出结果：

Hi Mark

Demo2

{{#变量名}} {{/变量名}}:循环变量/布尔值判断
{{^变量名}} {{/变量名}} ：和上面的语法相反；如果循环的列表为空或者非真值 就会进入这个分支。

模板：

 {{#navList}}//遍历navList变量

 {{#isActive}}//如果遍历的函数属性isActive则渲染下面的模板
 <li class="nav-item active">
 {{/isActive}}

 {{^isActive}}//反之渲染下面的模板
 <li class="nav-item">
 {{/isActive}} 

 <a class="link" href="{{href}}">{{desc}}</a>//渲染href、desc变量中的数据
 </li>

 {{/navList}}

渲染模板的数据：

navList:Array(4)
0:{name: "user-center", desc: "个人中心", href: "./user-center.html", isActive: true}
1:{name: "order-list", desc: "我的订单", href: "./order-list.html"}
2:{name: "user-pass-update", desc: "修改密码", href: "./user-pass-update.html"}
3:{name: "about", desc: "关于CampusO2O", href: "./about.html"}

得到的结果：

<li class="nav-item active"><a class="link" href="./user-center.html">个人中心</a> </li>
<li class="nav-item">  <a class="link" href="./order-list.html">我的订单</a> </li>
<li class="nav-item">  <a class="link" href="./user-pass-update.html">修改密码</a> </li>  
<li class="nav-item">  <a class="link" href="./about.html">关于CampusO2O</a> </li>