探究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 相关文章推荐
jQuery 白痴级入门教程
Nov 11 Javascript
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
Mar 23 Javascript
JS下高效拼装字符串的几种方法比较与测试代码
Apr 15 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
Jan 12 Javascript
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
Mar 16 Javascript
JS实现超炫网页烟花动画效果的方法
Mar 02 Javascript
用JS写的一个Ajax库(实例代码)
Aug 06 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
vue组件命名和props命名代码详解
Sep 01 Javascript
微信小程序实现可长按移动控件
Nov 01 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 5.0 Pear安装方法
2006/12/06 PHP
PHP PDOStatement::closeCursor讲解
2019/01/30 PHP
用js统计用户下载网页所需时间的脚本
2008/10/15 Javascript
Js切换功能的简单方法
2010/11/23 Javascript
jquery蒙版控件实现代码
2010/12/08 Javascript
Javascript学习笔记二 之 变量
2010/12/15 Javascript
jquery attr方法获取input的checked属性问题
2014/05/26 Javascript
元素绑定click点击事件方法
2015/06/08 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
2015/08/04 Javascript
chrome浏览器如何断点调试异步加载的JS
2016/09/05 Javascript
jQuery中on方法使用注意事项详解
2017/02/15 Javascript
AngularJS2中一种button切换效果的实现方法(二)
2017/03/27 Javascript
jquery replace方法去空格
2017/05/08 jQuery
dropload.js插件下拉刷新和上拉加载使用详解
2017/10/20 Javascript
JavaScript函数重载操作实例浅析
2020/05/02 Javascript
js实现微信聊天界面
2020/08/09 Javascript
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
Python判断操作系统类型代码分享
2014/11/22 Python
python实现的简单猜数字游戏
2015/04/04 Python
深入理解Python3中的http.client模块
2017/03/29 Python
Python使用Selenium+BeautifulSoup爬取淘宝搜索页
2018/02/24 Python
下载python中Crypto库报错:ModuleNotFoundError: No module named ‘Crypto’的解决
2018/04/23 Python
Python解析json时提示“string indices must be integers”问题解决方法
2019/07/31 Python
用Python调用win命令行提高工作效率的实例
2019/08/14 Python
Ubuntu权限不足无法创建文件夹解决方案
2020/11/14 Python
pycharm 关闭search everywhere的解决操作
2021/01/15 Python
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
澳大利亚最好的在线时尚精品店:Princess Polly
2018/01/03 全球购物
英国老牌潮鞋店:Offspring
2019/08/19 全球购物
如何利用XMLHTTP检测URL及探测服务器信息
2013/11/10 面试题
师范生自荐信
2013/10/27 职场文书
质检员岗位职责
2013/12/17 职场文书
党的群众路线个人对照检查材料
2014/09/23 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书
详细介绍Java中的CyclicBarrier
2022/04/13 Java/Android