探究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 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
jQuery的链式调用浅析
Dec 03 Javascript
JavaScript版DateAdd和DateDiff函数代码
Mar 01 Javascript
Json对象与Json字符串互转(4种转换方式)
Mar 27 Javascript
jquery插件开发注意事项小结
Jun 04 Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 Javascript
JS中input表单隐藏域及其使用方法
Feb 13 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 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
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
php判断当前用户已在别处登录的方法
2015/01/06 PHP
解决 firefox 不支持 document.all的方法
2007/03/12 Javascript
用jquery实现下拉菜单效果的代码
2010/07/25 Javascript
菜鸟javascript基础资料整理2
2010/12/06 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
基于javascript实现图片预加载
2016/01/05 Javascript
对称加密与非对称加密优缺点详解
2017/02/06 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
Node接收电子邮件的实例代码
2017/07/21 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
vue实现搜索过滤效果
2019/05/28 Javascript
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
Python实现新型冠状病毒传播模型及预测代码实例
2020/02/05 Python
python itsdangerous模块的具体使用方法
2020/02/17 Python
python实现堆排序的实例讲解
2020/02/21 Python
Python3 Tensorlfow:增加或者减小矩阵维度的实现
2020/05/22 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
蔻驰美国官网:COACH美国
2016/08/18 全球购物
加热夹克:RAVEAN
2018/10/19 全球购物
斯巴达比赛商店:Spartan Race
2019/01/08 全球购物
教师自我评价范文
2013/12/16 职场文书
网络事业创业计划书范文
2014/01/09 职场文书
简历上的自我评价
2014/02/03 职场文书
教师自我反思材料
2014/02/14 职场文书
公益广告语集锦
2014/03/13 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
推广活动策划方案
2014/08/23 职场文书
收款委托书
2014/10/14 职场文书
教师业务学习材料
2014/12/16 职场文书
微信小程序和php的登录实现
2021/04/01 PHP
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python