• Mustache(3)


    一、简单示例

    代码:

    复制代码
     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: "<b>ninesoft</b>"
    4             };
    5             show(Mustache.render("{{name}} <br /> {{company}} <br />{{{company}}}<br/>{{&company}}", view));
    复制代码

     结果:

    结论:

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

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

    三、绑定子属性的值

    代码:

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

     结果:

    结论:

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

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

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

    代码:

    1             var view = {
    2                 person: false
    3             };
    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}}<br />{{/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}}<br />{{/beatles}}", view));
    复制代码

     结果:

    结论:

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

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

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

    七、自定义函数

    代码:

    复制代码
    1             var view = {
    2                 "name": "Tater",
    3                 "bold": function () {
    4                     return function (text, render) {
    5                        return render(text) + "<br />";
    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 = "<h2>Names</h2>{{#names}}{{>user}}{{/names}}";
     9             var name = "<b>{{name}}</b>";
    10             show(Mustache.render(base, view, { user: name }));
    复制代码

     结果:

    结论:

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

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

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

    十、预编译模板

    代码:

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

    结论:

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

  • 相关阅读:
    计算广告学学习1
    scala学习手记20
    scala学习手记19
    scala学习手记18
    scala学习手记17
    SAM4E单片机之旅——12、USART
    SAM4E单片机之旅——11、UART之PDC收发
    SAM4E单片机之旅——10、UART与MCK之PLL
    SAM4E单片机之旅——9、UART与MCK之MAINCK
    SAM4E单片机之旅——8、UART初步
  • 原文地址:https://www.cnblogs.com/yelongsan/p/6343413.html
Copyright © 2020-2023  润新知