探究Javascript模板引擎mustache.js使用方法


Posted in Javascript onJanuary 26, 2016

我们将为大家详解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);

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

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

Javascript 相关文章推荐
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
简略说明Javascript中的= =(等于)与= = =(全等于)区别
Apr 16 Javascript
Js nodeType 属性全面解析
Nov 14 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
Jan 09 Javascript
TypeError document.getElementById(...) is null错误原因
May 18 Javascript
jquery validate demo 基础
Oct 29 Javascript
轻松学习jQuery插件EasyUI EasyUI创建CRUD应用
Nov 30 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
javascript检测移动设备横竖屏
May 21 Javascript
jQuery 获取遍历获取table中每一个tr中的第一个td的方法
Oct 05 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
基于aotu.js实现微信自动添加通讯录中的联系人功能
May 28 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 #Javascript
一篇文章掌握RequireJS常用知识
Jan 26 #Javascript
JS正则表达式比较常见用法
Jan 26 #Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
Jan 26 #Javascript
JS组件中bootstrap multiselect两大组件较量
Jan 26 #Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 #Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 #Javascript
You might like
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
MAC下通过改apache配置文件切换php多版本的方法
2017/04/26 PHP
jquery实现鼠标拖动图片效果示例代码
2014/01/09 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
javascript格式化json显示实例分析
2015/04/21 Javascript
jQuery实现简单下拉导航效果
2015/09/07 Javascript
jQuery基于事件控制实现点击显示内容下拉效果
2017/03/07 Javascript
Vue.js实现价格计算器功能
2020/03/30 Javascript
AngularJS的$location使用方法详解
2017/10/19 Javascript
jquery使用iscorll实现上拉、下拉加载刷新
2017/10/26 jQuery
bootstrap Table的一些小操作
2017/11/01 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
解决vue项目本地启动时无法携带cookie的问题
2021/02/06 Vue.js
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
[00:37]DOTA2上海特级锦标赛 OG战队宣传片
2016/03/03 DOTA
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python实现对象转换为xml的方法示例
2017/06/08 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
python标准库sys和OS的函数使用方法与实例详解
2020/02/12 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
CSS3伪类选择器:nth-child()
2009/04/02 HTML / CSS
乐高奥地利官方商店:LEGO Shop AT
2019/07/16 全球购物
Unix如何在一行中运行多个命令
2015/05/29 面试题
迎接领导欢迎词
2014/01/11 职场文书
手工社团活动方案
2014/02/17 职场文书
授权委托书样本
2014/04/03 职场文书
企业法人授权委托书
2014/04/03 职场文书
责任书范本
2014/08/25 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
2014年环保局工作总结
2014/12/11 职场文书
2016暑期校本培训心得体会
2016/01/08 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
vue实现同时设置多个倒计时
2021/05/20 Vue.js