您的位置：首页 > 其它

mustache:Web模板引擎

2013-04-13 09:20 141 查看

mustache.js Web模板引擎

示例：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Js/mustache.js" type="text/javascript"></script>
<script type="text/javascript">
//通过以哈希值或者对象的方式扩展模板标签
var view = {
title: "Joe",
calc: function () {
return 2 + 4;
}
};

//Mustache.render 函数有2个参数: (1) mustache 模板和 (2)包含了需要渲染给模板的数据和代码的一个视图对象。
var output = Mustache.render("{{title}} spends {{calc}}", view);
document.write(output);
</script>
</head>
<body>

</body>
</html>

效果：

Joe spends 6

看了Mustache的github，学学此中的语法，做个笔记

1.简单的变量调换：{{name}}

var data = { "name": "Willy" };
Mustache.render（"{{name}} is awesome."，data）;

返回成果 Willy is awesome.

2.若是变量含有html的代码的，例如： 、<tr>等等而不想转义可以在用{{&name}}

var data = {
"name" : "<br>Willy<br>"
};
var output = Mustache.render（"{{&name}} is awesome."， data）;
console.log（output）;

成果： Willy is awesome.成果： Willy is awesome.

去掉"&"的成果是转义为： Willy is awesome.（默认将"<"和">"转义）

3.若是是对象，还能申明其属性

var data = {
"name" : {
"first" : "Chen"，
"last" : "Jackson"
}，
"age" : 18
};
var output = Mustache.render（
"name:{{name.first}} {{name.last}}，age:{{age}}"， data）;
console.log（output）;

成果：name:Chen Jackson，age:18成果：name:Chen Jackson，age:18

4.{{＃param}}这个标签很强大，有if断定、forEach的功能。

var data = {
"nothin":true
};
var output = Mustache.render（
"Shown.{{＃nothin}}Never shown!{{/nothin}}"， data）;
console.log（output）;

若是nothin是空或者null，或者是false都邑输出Shown.相反则是Shown.Never shown!。若是nothin是空或者null，或者是false都邑输出Shown.相反则是Shown.Never shown!。

5.迭代

var data = {
"stooges" : [ {
"name" : "Moe"
}， {
"name" : "Larry"
}， {
"name" : "Curly"
} ]
};
var output = Mustache.render（"{{＃stooges}}<b>{{name}}</b>{{/stooges}}"，
data）;
console.log（output）;

输出：Moe

Larry

Curly

6.若是迭代的是数组，还可以用{{.}}来调换每个元素

var data = {
"musketeers" : [ "Athos"， "Aramis"， "Porthos"， "D""Artagnan" ]
};
var output = Mustache.render（"{{＃musketeers}}* {{&.}}{{/musketeers}}"，
data）;
console.log（output）;

输出：* Athos

      * Aramis

      * Porthos

      * D""Artagnan

7.迭代输出的还可所以一个function返回的成果，function可以读取当前变量的高低文来获取其他属性履行其他操纵

var data = {
"beatles" : [ {
"firstName" : "John"，
"lastName" : "Lennon"
}， {
"firstName" : "Paul"，
"lastName" : "McCartney"
}， {
"firstName" : "George"，
"lastName" : "Harrison"
}， {
"firstName" : "Ringo"，
"lastName" : "Starr"
} ]，
"name" : function（） {
return this.firstName + " " + this.lastName;
}
};
var output = Mustache
.render（"{{＃beatles}} *{{name}}{{/beatles}}"， data）;
console.log（output）;

输出： *John Lennon

       *Paul McCartney

       *George Harrison

       *Ringo Starr

8：办法里面可以再履行变量中的表达式

var data = {
"name" : "{{age}}" + "Tater"，
"bold" : function（） {
return function（text， render） {
console.log（text）;
return "<b>" + render（text） + "</b>";
};
}，
"age" : 18
};
var output = Mustache.render（"{{＃bold}}Hi {{name}}.{{/bold}}"， data）;
console.log（output）;

输出成果：

Hi {{age}}Tater.

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航