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

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

简单示例

可以很明显的看出Mustache模板的语法,只需要使用{{和}}包含起来就可以了,里面放上对象的名称。

通过本示例也可以看出,如果指定的属性为函数的时候,不会输出函数里面的内容,而是先执行函数,然后将返回的结果显示出来。

不转义HTML标签

ninesoft" }; show(Mustache.render("{{name}}
{{company}}
{{{company}}}
{{&company}}",view));

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

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

绑定子属性的值

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

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

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

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

循环输出

{{/stooges}}",view));

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

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

{{/beatles}}",view));

循环输出是有了,但是我们还想后期进行加工。那么这个完全符合你的需要,因为Mustache会将数组中的值传递给你的函数,输出你函数返回的值。这里我们可以看到最外层是数组,只要在里面使用函数那么外层的数组就会作为这个函数的参数传递进去。

自定义函数

"; } } } show(Mustache.render("{{#bold}}{{name}}{{/bold}}",view));

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

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

反义节

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

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

部分模板

Mustache虽然节约了很多时间,但是我们定义了很多模板,但是彼此之间无法互相嵌套使用,也会造成繁琐。

所以这里我们还要介绍如何定义部分模板,用来在其他模板里面使用,这里使用其他模板的方式仅仅是{{>templetename}}。

最大的不同就是Mustache.render方法有了第三个参数。

预编译模板

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,实现方式如下: 首先在编辑器里面插入javascript代码: 确定后会在编辑器插入这样的代码: <pre
这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件 上一篇“让kindeditor显示高亮代码”中已经
js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)