这篇文章主要为大家介绍了Javascript模板引擎mustache.js使用方法，mustache.js是一个简单强大的Javascript模板引擎，使用它可以简化在js代码中的html编写，压缩后只有9KB，非常值得在项目中使用，感兴趣的小伙伴们可以参考一下
 

我们将为大家详解Mustache.js轻量级JavaScript模版引擎使用方法。

简单示例

1
2
3
4
5
6
7
8
9
10
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标签

1
2
3
4
5
var view = {
 name: "YZF",
 company: "<b>ninesoft</b>"
};
show(Mustache.render("{{name}} <br /> {{company}} <br />{{{company}}}<br/>{{&company}}", view));

通过这个示例可以看出Mustache默认是会将值里面的html标记进行转义的，但是有时候我们并不需要。

所以这里我们可以使用{{{和}}}包含起来，或者是{{和}}包含，那么Mustache就不会转义里面的html标记。

绑定子属性的值

1
2
3
4
5
6
7
8
var view = {
 "name": {
 first: "Y",
 second: "zf"
 },
 "age": 21
};
show(Mustache.render("{{name.first}}{{name.second}} age is {{age}}", view));

相信看到第一个示例的时候，就会有人想到能不能绑定子属性，如果你努力看下去了。那么祝贺你，现在就是解决你的需求的方式，仅仅只需要通过.来使用子属性即可。

条件式选择是否渲染指定部分

1
2
3
4
var view = {
 person: false
};
show(Mustache.render("eff{{#person}}abc{{/person}}", view));

问题总是不断，如果我们还需要能够根据我们给的值，决定是否渲染某个部分，那么现在就可以解决这个问题，当然还要提示的就是不仅仅是false会导致不渲染指定部分。

null，空数组，0，空字符串一样有效。语法上面比较简单，就是使用{{#key}} ... {{/key}}来控制中间的内容。

循环输出

1
2
3
4
5
6
7
8
var view = {
 stooges: [
 { "name": "Moe" },
 { "name": "Larry" },
 { "name": "Curly" }
 ]
};
show(Mustache.render("{{#stooges}}{{name}}<br />{{/stooges}}", view));

仅仅学会上面的方式，大部分地方你都解决了，但是还是会出现麻烦的地方，就是循环输出，如果你一个一个写，相信会很烦躁，当然Mustache不会让我们失望，它也给出了如何循环输出的方式，这里是将一个由对象组成的数组输出，如果我们输出的是数组，就需要使用{{.}}来替代{{name}}。

循环输出指定函数处理后返回的值

1
2
3
4
5
6
7
8
9
10
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会将数组中的值传递给你的函数，输出你函数返回的值。这里我们可以看到最外层是数组，只要在里面使用函数那么外层的数组就会作为这个函数的参数传递进去。

自定义函数

1
2
3
4
5
6
7
8
9
var view = {
 "name": "Tater",
 "bold": function () {
 return function (text, render) {
   return render(text) + "<br />";
 }
 }
}
show(Mustache.render("{{#bold}}{{name}}{{/bold}}", view));

上面我们都是用的变量作为节，那么我们现在用函数作为节，会有什么效果呢。

它会调用我们函数返回的函数，将节中间的原始字符串作为第一个参数，默认的解释器作为第二个参数，那么我们就可以自行加工。

反义节

1
2
3
4
var view = {
 "repos": []
};
show(Mustache.render("{{#repos}}{{.}}{{/repos}}{{^repos}}no repos{{/repos}}", view));

上面我们也用节，但是仅仅只能选择是否输出某个部分。所以这里我们弥补一下。

如果我们使用了{{^和}}来定义节的话，那么这个部分只会在里面的值为空，null，空数组，空字符串的时候才会显示。那么我们就可以实现了if else的效果了。

部分模板

1
2
3
4
5
6
7
8
9
10
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方法有了第三个参数。

预编译模板

1
2
3
Mustache.parse(template);
//其他代码
Mustache.render(template,view);

模板既然有好处，也有坏处。就是编译模板需要时间，所以在我们已知会使用某个模板的前提下，我们可以预先编译好这个模板，以便后面的使用。

希望本文所述对大家学习有所帮助。

最新文章

  1. AppBox升级进行时 - 扁平化的权限设计
  2. Node.js 学习资源
  3. The hierarchy of the type is inconsistent错误问题
  4. C语言程序设计第九次作业
  5. 《css3实战》读书笔记 第一章 基于CSS需求而编写的HTML.
  6. cdn提供商
  7. Unity3d 残影效果（狂拽炫酷叼炸天）
  8. mysql的ERROR:1042
  9. java 中的断言assert的使用
  10. hibernate建表一对多 一的一方控制多的方
  11. hdu-5082
  12. 使用Python在2M内存中排序一百万个32位整数
  13. 设计模式-模板方法模式（Head First）
  14. 1、win10下连接本地系统上的Linux操作系统（分别以Nat方式和桥接模式实现）
  15. 【MongoDB异常】Exception authenticating MongoCredential解决方法
  16. Select查询命令
  17. Spring Boot 2.0尝鲜-动态 Banner
  18. 配置zabbix当内存剩余不足15%的时候触发报警
  19. rabbitmq的发布确认和事务 - 2207872494的个人空间
  20. 几行css3代码实现超炫加载动画

热门文章

  1. du df的用法
  2. Python操作 Excel表格
  3. vue+elementUI 做的递归组件
  4. vue 父子组件渲染
  5. CSS背景和CSS3背景background属性
  6. 简记特定容器list和forward_list算法
  7. [luogu]P2279 [HNOI2003]消防局的设立[贪心]
  8. iOS-KMNavigationBarTransition 框架学习
  9. React-Native 之 GD （二十）removeClippedSubviews / modal放置的顺序 / Android 加载git图\动图 / 去除 Android 中输入框的下划线 / navigationBar
  10. ThinkPHP框架实现rewrite路由配置