博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Mustache(3)
阅读量:6757 次
发布时间:2019-06-26

本文共 4172 字,大约阅读时间需要 13 分钟。

一、简单示例

代码:

1             function show(t) { 2                 $("#content").html(t); 3             } 4  5             var view = { 6                 title: 'YZF', 7                 cacl: function () { 8                     return 6 + 4; 9                 }10             };11             $("#content").html(Mustache.render("{
{title}} spends {
{cacl}}", view));

结果:

YZF spends 10

 

结论:

可以很明显的看出Mustache模板的语法,只需要使用{

{和}}包含起来就可以了,里面放上对象的名称。

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

 

 二、不转义html标签

代码:

1             var view = {2                 name: "YZF",3                 company: "ninesoft"4             };5             show(Mustache.render("{
{name}}
{
{company}}
{
{
{company}}}
{
{&company}}", view));

 结果:

 

结论:

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

所以这里我们可以使用{

{
{和}}}包含起来,或者是{
{&和}}包含,那么Mustache就不会转义里面的html标记。

 

三、绑定子属性的值

代码:

1             var view = {2                 "name": {3                     first: "Y",4                     second: "zf"5                 },6                 "age": 217             };8             show(Mustache.render("{
{name.first}}{
{name.second}} age is {
{age}}", view));

 结果:

 

结论:

相信看到第一个示例的时候,就会有人想到能不能绑定子属性,如果你努力看下去了。

那么祝贺你,现在就是解决你的需求的方式,仅仅只需要通过.来使用子属性即可。

 

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

代码:

1             var view = {2                 person: false3             };4             show(Mustache.render("eff{
{#person}}abc{
{/person}}", view));

 结果:

 

结论:

问题总是不断,如果我们还需要能够根据我们给的值,决定是否渲染某个部分。

那么现在就可以解决这个问题,当然还要提示的就是不仅仅是false会导致不渲染指定部分。

null,空数组,0,空字符串一样有效。语法上面比较简单,就是使用{

{#key}} ... {
{/key}}

来控制中间的内容。

 

五、循环输出

代码:

1             var view = {2                 stooges: [3                     { "name": "Moe" },4                     { "name": "Larry" },5                     { "name": "Curly" }6                 ]7             };8             show(Mustache.render("{
{#stooges}}{
{name}}
{
{/stooges}}", view));

结果:

 

结论:

仅仅学会上面的方式,大部分地方你都解决了,但是还是会出现麻烦的地方。

就是循环输出,如果你一个一个写,相信会很烦躁,当然Mustache不会让我们失望,

它也给出了如何循环输出的方式,这里是将一个由对象组成的数组输出,如果我们

输出的是数组,就需要使用{

{.}}来替代{
{name}}。

 

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

代码:

1             var view = { 2                 "beatles": [ 3                     { "firstname": "Johh", "lastname": "Lennon" }, 4                     { "firstname": "Paul", "lastname": "McCartney" } 5                 ], 6                 "name": function () { 7                     return this.firstname + this.lastname; 8                 } 9             };10             show(Mustache.render("{
{#beatles}}{
{name}}
{
{/beatles}}", view));

 结果:

 

结论:

循环输出是有了,但是我们还想后期进行加工。那么这个完全符合你的需要,因为Mustache会将

数组中的值传递给你的函数,输出你函数返回的值。这里我们可以看到最外层是数组,只要在里面

使用函数那么外层的数组就会作为这个函数的参数传递进去。

 

七、自定义函数

代码:

1             var view = {2                 "name": "Tater",3                 "bold": function () {4                     return function (text, render) {5                        return render(text) + "
";6 }7 }8 }9 show(Mustache.render("{
{#bold}}{
{name}}{
{/bold}}", view));

 结果:

 

结论:

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

它会调用我们函数返回的函数,将节中间的原始字符串作为第一个参数,默认

的解释器作为第二个参数,那么我们就可以自行加工。

 

八、反义节

代码:

1 var view = {2                 "repos": []3             };4             show(Mustache.render("{
{#repos}}{
{.}}{
{/repos}}{
{^repos}}no repos{
{/repos}}", view));

 结果:

 

结论:

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

如果我们使用了{

{^和}}来定义节的话,那么这个部分只会在里面的值为空,null,

空数组,空字符串的时候才会显示。那么我们就可以实现了if else的效果了。

 

九、部分模板

代码:

1             var view = { 2                 names: [ 3                     { "name": "y" }, 4                     { "name": "z" }, 5                     { "name": "f" } 6                 ] 7             }; 8             var base = "

Names

{
{#names}}{
{>user}}{
{/names}}"; 9 var name = "{
{name}}
";10 show(Mustache.render(base, view, { user: name }));

 结果:

 

结论:

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

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

{>templetename}}。

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

 

十、预编译模板

代码:

1             Mustache.parse(template);2             //其他代码3             Mustache.render(template,view);

 

结论:

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

转载地址:http://luweo.baihongyu.com/

你可能感兴趣的文章
WINPE集成SCSI/RAID驱动
查看>>
我们为什么需要大数据?
查看>>
单例模式-singleton
查看>>
自动布局下的iPhone 6 plus等比例放大,且UITextfield失败关于placeholder的原因
查看>>
利用div实现邮件收件人的输入框
查看>>
我的友情链接
查看>>
单页布局
查看>>
我的友情链接
查看>>
综合布线详细方案设计
查看>>
rhel6.3下安装GCC4.8.1
查看>>
大图片生成缩略图 导致imagecreatefromjpeg 内存崩溃问题
查看>>
我的友情链接
查看>>
手工恢复
查看>>
二 IOC再探
查看>>
一些常用软件的网络端口协议分类介绍
查看>>
马哥5-2
查看>>
ORA-00257: archiver error. Connect internal only, until freed 错误的处理方法
查看>>
华为 5300系列 cpu oid
查看>>
风格化的ToggleButton
查看>>
vue.js 学习手记
查看>>