zoukankan      html  css  js  c++  java
  • mustache语法整理

    基本使用方法:

    {
      "name": "Chris",
      "company": "<b>GitHub</b>"
    }
    template output
    1、 {{name}}
    2、 {{age}} //数据中没有age,输出为空
    3、 {{company}} //会转义
    4、 {{{company}}} //不会转义
    5、 {{&company}}
    6、输出{{}} {{
    =<% %>=}} {{company}} <%={{ }}=%>

    7、注释:{{! }}
    1、 Chris
    2、
    3、 &lt;b&gt;GitHub&lt;/b&gt;
    4、 <b>GitHub</b>
    5、 <b>GitHub</b>
    6、 {{company}}

    Sections

    怎么定义:一个叫做person的Section: {{#person}}这里的内容都是属于person这个section的代码段:block {{/person}}

    1、如果person变量不存在,或者person的值为nullundefinedfalse0, NaN, empty string or an empty list

    那么这个Section之间的所有内容都不会显示。这个可以用来控制那些代码片段不显示

    2、如果person变量的值不为nullundefined, or false, and is not an empty list,那么这个block会被渲染。如果是数组,会迭代渲染

     其中,有几种经典用法:

    说明 数据 template output
    当循环数组时  . 表示current item in the list
    {
      "musketeers": ["Athos", "Aramis", "Porthos", "D'Artagnan"]
    }
    {{#musketeers}}
    * {{.}}
    {{/musketeers}}
    * Athos
    * Aramis
    * Porthos
    * D'Artagnan

    输入的数据可以为函数,这时候调用这个数据

    就可以达到调用函数的功能。

    this之前遍历的当前对象

    
    
    {
      "beatles": [
        { "firstName": "John", "lastName": "Lennon" },
        { "firstName": "Paul", "lastName": "McCartney" },
        { "firstName": "George", "lastName": "Harrison" },
        { "firstName": "Ringo", "lastName": "Starr" }
      ],
      "name": function () {
        return this.firstName + " " + this.lastName;
      }
    }
    
    
     
    {{#beatles}}
    * {{name}}
    {{/beatles}}
     
    * John Lennon
    * Paul McCartney
    * George Harrison
    * Ringo Starr

    Inverted Sections

    {{^person}}code block {{/person}}

    这个和section类似,区别是:当person的值为nullundefinedfalsefalsy or an empty list.的时候才会渲染。

  • 相关阅读:
    记第一场省选
    POJ 2083 Fractal 分形
    CodeForces 605A Sorting Railway Cars 思维
    FZU 1896 神奇的魔法数 dp
    FZU 1893 内存管理 模拟
    FZU 1894 志愿者选拔 单调队列
    FZU 1920 Left Mouse Button 简单搜索
    FZU 2086 餐厅点餐
    poj 2299 Ultra-QuickSort 逆序对模版题
    COMP9313 week4a MapReduce
  • 原文地址:https://www.cnblogs.com/hemi/p/4702952.html
Copyright © 2011-2022 走看看