Fork me on GitHub
代码改变世界

Javascript模板引擎:Hogan

2015-11-29 14:19  autrol  阅读(942)  评论(0编辑  收藏  举报

hogan.js是一个开源前端模板引擎,无逻辑的设计,简单好用,性能也不错。

使用

引入hogan.js,下载链接:http://www.bootcdn.cn/hogan.js/,然后通过hogan.js语法把模版渲染出来。代码如下:

<script src="hogan.js"></script>
<script>
var data = {
    name: "执念"
};
var template = "我的名字:{{name}}";

var hogan = Hogan.compile(template);  //Hogan模版对象
var html = hogan.render(data);        //结果:我的名字:执念
</script>

模版语法

1、{{keyName}}:

{{}}就是模版的标示符,花括号里的 keyName 表示键名,这句的作用是直接输出与键名匹配的键值,就如上面的例子。

2、{{#keyName}} {{/keyName}}:

#开始、以/结束表示区块,它会根据当前上下文中的键值来对区块进行一次或多次渲染,例如:

var data = {
    people: [{
        name: "Jack",
        age: 18
    }, {
        name: "Davide",
        age: 19
    }]
};
var template = "{{#people}}名字:{{name}},年龄:{{age}};{{/people}}";

var hogan = Hogan.compile(template);  //Hogan模版对象
var html = hogan.render(data);        //结果:名字:Jack,年龄:18;名字:Davide,年龄:19;

{{#keyName}}{{/keyName}}具备简单的判断功能,如果keyName值为null/undefined/false;则不渲染输出任何内容。如:

var data = {
    unvisible: false,
    visible: true
};
var template = "{{#unvisible}}false;{{/unvisible}}{{#visible}}true{{/visible}}";

var hogan = Hogan.compile(template);  //Hogan模版对象
var html = hogan.render(data);        //结果:true

 3、{{^keyName}} {{/keyName}}:

与{{^keyName}}{{/keyName}}类似,不同在于它是当keyName值为null/undefined/false时才渲染输出该区块内容。如:

var data = {
    unvisible: false,
    visible: true
};
var template = "{{#unvisible}}false;{{/unvisible}}{{#visible}}true{{/visible}}";
var hogan = Hogan.compile(template); //Hogan模版对象 var html = hogan.render(data); //结果:true

4、{{.}}:

 表示枚举,可以循环输出整个数组,如:

var data = {
    array: [1,2,3]
};
var template = "{{#array}}数字:{{.}};{{/array}}";
var hogan = Hogan.compile(template); //Hogan模版对象 var html = hogan.render(data); //结果:数字:1;数字:2;数字:3;

 5、{{>modular}}:

以">"开始表示子模块,如{{>modular}};当结构比较复杂时,我们可以使用该语法将复杂的结构拆分成几个小的子模块,如:

var data = {
    name: "执念",
    age: 18,
    sex: "男"
};
var template1 = "我的名字:{{name}};{{>age}};{{>sex}};";
var template2 = {
    age: "年龄:{{age}}",
    sex: "性别:{{sex}}"
};

var hogan = Hogan.compile(template1);      //Hogan模版对象
var html = hogan.render(data, template2);  //结果:我的名字:执念;年龄:18;性别:男;

6、{{{keyName}}}或者{{&keyName}}:

{{keyName}}输出会将等特殊字符转译,如果想保持内容原样输出可以使用{{{}}}或者{{&}},如:

var data = {
    specialChar: "<span>转义</span>"
};
var template = "{{specialChar}}<br />{{{specialChar}}}<br />{{&specialChar}}";

var hogan = Hogan.compile(template);    //Hogan模版对象
var html = hogan.render(data);          //结果:&lt;span&gt;转义&lt;/span&gt;<br /><span>转义</span><br /><span>转义</span>

正常的{{specialChar}}被Hogan转义,最终会以纯文本方式显示,而{{{specialChar}}}和{{&specialChar}}中包含的标签依旧正常输出,未转义。

 7、{{!notes}}或者<!-- notes -->:

{{!}}表示注释,注释后不会渲染输出任何内容,但是不足之处在于注释内部不能包含mustache变量,否则会不好用。使用HTML的注释,能够注释掉任何内容。

var data = {
    notes: "注释"
};
var template = "{{!notes}}";

var hogan = Hogan.compile(template);    //Hogan模版对象
var html = hogan.render(data);          //结果:"",空字符串

处理复杂数据

Hogan展示的还可以是一个function返回的结果,function可以读取当前变量的上下文来获取其他属性执行其他操作,如:

var data = {
    judgements: [{
        name: "Jack",
        age: 18
    },{
        name: "Davide",
        age: 35
    },{
        name: "King",
        age: 60
    }],
    ageStage: function() {
        if(this.age < 20) {
            return "青年"
        }
        else if(this.age < 40) {
            return "中年"
        }
        else {
            return "老人"
        }
    }
};
var template = "{{#judgements}}{{name}}人生阶段:{{ageStage}};{{/judgements}}";

var hogan = Hogan.compile(template);    //Hogan模版对象
var html = hogan.render(data);          //结果:Jack人生阶段:青年;Davide人生阶段:中年;King人生阶段:老人;

通过此种方式,可以对复杂的数据进行处理。从上面可以看出,ageStage并不是judgemengs包含的部分,但是可以被使用,这说明只要是data包含的数据,在其他地方也可以被使用。