js模板mustache

作者：zccst

模板：

1）js模板可以是一个html文件。
模板文件.html
<h1>Hello {{name}}, it is {{timeNow}}.</h1>

2) js模板可以是一个值是html代码的js变量
var template = "<p>Hello {{name}}, it is {{timeNow}}.</p>";

3) js模板可以是一个script片段
<script id="tpl-greeting" type="text/html">
<dl>
<dt>Name</dt>
<dd>{{name}}</dd>
<dt>Time</dt>
<dd>{{timeNow}}</dd>
</dl>
</script>

mustache模板语言。
变量表示：变量标记将当前上下文的变量通过模板渲染，如果当前上下文不存在该变量，则渲染为空串。

默认变量会被经过 HTML 编码处理，如需显示原始值，用三个大括号或者在模板标记的初始加入 & 符号。
{{变量名 }} ，{{{变量名 }}}

如果当前键为基本或对象，则渲染一次，如果为数组，则渲染数组长度次数。节点以 # 号开始，以 / 结束。
模板：{{#stooges}}<b>{{name}}</b><br>{{/stooges}}"
json: {"stooges":[{"name":"王升"},{"name":"梁文彦"},{"name":"石洋"}]};

2.填充数组节点以 # 号开始，以 / 结束,则渲染数组长度次数。
模板{{#数组}}{{数组内的key}}{{/数组}}
var template = "{{#stooges}}<b>{{name}}</b><br>{{/stooges}}";var view = {"stooges":[{"name":"王升"},{"name":"梁文彦"},{"name":"石洋"}]}


3.函数作为模板的变量,该函数会在当前列表的每一个元素的上下文迭代执行。

var template = "{{#beatles}}* {{name}}<br/>{{/beatles}}";
var view = {
    "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 template = "{{#bold}}Hi {{name}} {{lastName}}.{{/bold}}";
var view = {
    "name": "John",
    "lastName": "Lennon",
    "bold": function () {
        return function (text, render) {return "<b>" + render(text) + "</b>";}
    }
}

mustache模板使用
模板变量在上下找模板变量需要的数据进行填充。json数据的key跟模板的变量对应就会填充。模板变量和json的key对应不上就不填充。生成展示代码没填充的变量不显示

用Mustache.render(template, view)方法填充数据生成展示代码
view:为json数据，作为模板上下文
template:为模板对象

//模板
var template = "<p>Hello {{name}}, it is {{{ignore name}}}.it is {{&name}}</p>";

//数据
var date = new Date();
var view = {name: "<b>Jonny</b>",timeNow: date.getHours() + ':' + date.getMinutes() };


使用模板文件要用该方法填充数据生成展示代码

$.get('模板文件', function(templates) {
    var template = $(templates).html();
    $Mustache.render(template, view);
});

如果您觉得本文的内容对您的学习有所帮助，您可以微信：