我们将为大家详解Mustache.js轻量级JavaScript模版引擎使用方法。
简单示例
function show(t) {
$("#content").html(t);
}
var view = {
title: 'YZF',
cacl: function () {
return 6 + 4;
}
};
$("#content").html(Mustache.render("{{title}} spends {{cacl}}", view));
可以很明显的看出Mustache模板的语法，只需要使用{{和}}包含起来就可以了，里面放上对象的名称。
通过本示例也可以看出，如果指定的属性为函数的时候，不会输出函数里面的内容，而是先执行函数，然后将返回的结果显示出来。
不转义HTML标签
var view = {
name: "YZF",
company: "<b>ninesoft</b>"
};
show(Mustache.render("{{name}} <br /> {{company}} <br />{{{company}}}<br/>{{&company}}", view));
通过这个示例可以看出Mustache默认是会将值里面的html标记进行转义的，但是有时候我们并不需要。
所以这里我们可以使用{{{和}}}包含起来，或者是{{和}}包含，那么Mustache就不会转义里面的html标记。
绑定子属性的值
var view = {
"name": {
first: "Y",
second: "zf"
},
"age": 21
};
show(Mustache.render("{{name.first}}{{name.second}} age is {{age}}", view));
相信看到第一个示例的时候，就会有人想到能不能绑定子属性，如果你努力看下去了。那么祝贺你，现在就是解决你的需求的方式，仅仅只需要通过.来使用子属性即可。
条件式选择是否渲染指定部分
var view = {
person: false
};
show(Mustache.render("eff{{#person}}abc{{/person}}", view));
问题总是不断，如果我们还需要能够根据我们给的值，决定是否渲染某个部分，那么现在就可以解决这个问题，当然还要提示的就是不仅仅是false会导致不渲染指定部分。
null，空数组，0，空字符串一样有效。语法上面比较简单，就是使用{{#key}} ... {{/key}}来控制中间的内容。
循环输出
var view = {
stooges: [
{ "name": "Moe" },
{ "name": "Larry" },
{ "name": "Curly" }
]
};
show(Mustache.render("{{#stooges}}{{name}}<br />{{/stooges}}", view));
仅仅学会上面的方式，大部分地方你都解决了，但是还是会出现麻烦的地方，就是循环输出，如果你一个一个写，相信会很烦躁，当然Mustache不会让我们失望，它也给出了如何循环输出的方式，这里是将一个由对象组成的数组输出，如果我们输出的是数组，就需要使用{{.}}来替代{{name}}。
循环输出指定函数处理后返回的值
var view = {
"beatles": [
{ "firstname": "Johh", "lastname": "Lennon" },
{ "firstname": "Paul", "lastname": "McCartney" }
],
"name": function () {
return this.firstname + this.lastname;
}
};
show(Mustache.render("{{#beatles}}{{name}}<br />{{/beatles}}", view));
循环输出是有了，但是我们还想后期进行加工。那么这个完全符合你的需要，因为Mustache会将数组中的值传递给你的函数，输出你函数返回的值。这里我们可以看到最外层是数组，只要在里面使用函数那么外层的数组就会作为这个函数的参数传递进去。
自定义函数
var view = {
"name": "Tater",
"bold": function () {
return function (text, render) {
return render(text) + "<br />";
}
}
}
show(Mustache.render("{{#bold}}{{name}}{{/bold}}", view));
上面我们都是用的变量作为节，那么我们现在用函数作为节，会有什么效果呢。
它会调用我们函数返回的函数，将节中间的原始字符串作为第一个参数，默认的解释器作为第二个参数，那么我们就可以自行加工。
反义节
var view = {
"repos": []
};
show(Mustache.render("{{#repos}}{{.}}{{/repos}}{{^repos}}no repos{{/repos}}", view));
上面我们也用节，但是仅仅只能选择是否输出某个部分。所以这里我们弥补一下。
如果我们使用了{{^和}}来定义节的话，那么这个部分只会在里面的值为空，null，空数组，空字符串的时候才会显示。那么我们就可以实现了if else的效果了。
部分模板
var view = {
names: [
{ "name": "y" },
{ "name": "z" },
{ "name": "f" }
]
};
var base = "<h2>Names</h2>{{#names}}{{>user}}{{/names}}";
var name = "<b>{{name}}</b>";
show(Mustache.render(base, view, { user: name }));
Mustache虽然节约了很多时间，但是我们定义了很多模板，但是彼此之间无法互相嵌套使用，也会造成繁琐。
所以这里我们还要介绍如何定义部分模板，用来在其他模板里面使用，这里使用其他模板的方式仅仅是{{>templetename}}。
最大的不同就是Mustache.render方法有了第三个参数。
预编译模板
Mustache.parse(template); //其他代码 Mustache.render(template,view);
模板既然有好处，也有坏处。就是编译模板需要时间，所以在我们已知会使用某个模板的前提下，我们可以预先编译好这个模板，以便后面的使用。
希望本文所述对大家学习有所帮助。
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。