探究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 相关文章推荐
Stop SQL Server
Jun 21 Javascript
javascript控制swfObject应用介绍
Nov 29 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
浅谈javascript 函数属性和方法
Jan 21 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
浅谈json取值(对象和数组)
Jun 24 Javascript
基于Vue.js实现数字拼图游戏
Aug 02 Javascript
轻松学习Javascript闭包
Mar 01 Javascript
Ajax实现不刷新取最新商品
Mar 01 Javascript
webpack4简单入门实例
Sep 06 Javascript
js中int和string数据类型互相转化实例
Jan 16 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
Nov 09 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
PHP 构造函数和析构函数原理与用法分析
2020/04/21 PHP
超棒的javascript页面顶部卷动广告效果
2007/12/01 Javascript
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
js实现遍历含有input的table实例
2015/12/07 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
微信小程序 传值取值的几种方法总结
2017/01/16 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
[51:30]OG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/30 DOTA
[52:06]完美世界DOTA2联赛决赛日 Inki vs LBZS 第一场 11.08
2020/11/10 DOTA
python检测lvs real server状态
2014/01/22 Python
跟老齐学Python之Python文档
2014/10/10 Python
用matplotlib画等高线图详解
2017/12/14 Python
对python sklearn one-hot编码详解
2018/07/10 Python
Django添加KindEditor富文本编辑器的使用
2018/10/24 Python
在win10和linux上分别安装Python虚拟环境的方法步骤
2019/05/09 Python
python实现接口并发测试脚本
2019/06/25 Python
pycharm new project变成灰色的解决方法
2019/06/27 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
将python2.7添加进64位系统的注册表方式
2019/11/20 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
深入理解HTML的FormData对象
2016/05/17 HTML / CSS
New Balance澳大利亚官网:运动鞋和健身服装
2019/02/23 全球购物
保卫科工作岗位职责
2014/03/01 职场文书
协议书的格式
2014/04/23 职场文书
法制宣传口号
2014/06/16 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
2014教师专业技术工作总结
2014/12/03 职场文书
党员检讨书范文
2014/12/27 职场文书
大学学生会竞选稿
2015/11/19 职场文书
python ansible自动化运维工具执行流程
2021/06/24 Python
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技