这篇文章主要为大家介绍了 Javascript 模板引擎 mustache.js 使用方法,mustache.js 是一个简单强大的 Javascript 模板引擎,使用它可以简化在 js 代码中的 html 编写,压缩后只有 9KB,非常值得在项目中使用,感兴趣的小伙伴们可以参考一下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
我们将为大家详解 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 模板的语法,只需要使用 {{和}} 包含起来就可以了,里面放上对象的名称。
通过本示例也可以看出,如果指定的属性为函数的时候,不会输出函数里面的内容,而是先执行函数,然后将返回的结果显示出来。
- 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);
模板既然有好处,也有坏处。就是编译模板需要时间,所以在我们已知会使用某个模板的前提下,我们可以预先编译好这个模板,以便后面的使用。
希望本文所述对大家学习有所帮助。
来源: http://www.phperz.com/article/17/0220/267388.html