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.的时候才会渲染。

  • 相关阅读:
    npm 与 yarn 发展史
    关于oracle sql语句查询时表名和字段名要加双引号的问题
    Navicat工具mysql转库oracle步骤
    Linux根目录扩容方法及其涉及的相关磁盘操作
    Oracle中的数据类型详解
    一张图看懂钢铁生产工艺流程
    MYBATIS-PLUS关联查询,一对一、一对多
    直接替换Springboot jar包中的文件
    springboot配置数据库密码特殊字符报错问题
    教你一招,把 Win10 更新暂停到 N 年后的神奇方法
  • 原文地址:https://www.cnblogs.com/hemi/p/4702952.html
Copyright © 2011-2022 走看看