用法:

  • Variable Tags

    1. {{name}} 用来渲染值name

       datas: 
      
       let data = ["value": "test"]
      
       -----------
      template: {{value}} a lession -----------
      rendering: test a lession
  • Section Tags

    1. {{#items}}...{{/items}} 执行条件语句,枚举出里面的对象

      • 按需渲染数据
      • 遍历数据
      • 获取里面的每一项

      如果{{value}}...{{/value}}中的value错误的(下面的),那么将不会被渲染:

      1. 缺少值

      2. false

      3. 0

      4. 字符串

      5. 空集合

      6. 为NSNull

      如果value 是集合的话

       datas:
      [
      "friends": [
      [ "name": "Hulk Hogan" ],
      [ "name": "Albert Einstein" ],
      [ "name": "Tom Selleck" ],
      ]
      ] ------------- template:
      {{# friends }}
      - {{ name }}
      {{/ friends }} -------------
      rendering: - Hulk Hogan
      - Albert Einstein
      - Tom Selleck

      上面所说的集合可以是Arrays,ranges, sets, NSArray, NSSet等

      其他值既不是falsey, 也不是collection,那么这个块就会被渲染一次:

       datas:
      [
      "user": [
      "name": "Mario"
      "score": 1500
      ]
      ] -------------
      template:
      {{# user }}
      - {{ name }}
      - {{ score }}
      {{/ user }} --------------
      rendering:
      - Mario
      - 1500
    2. {{^items}}...{{/items}} 对应于上方的对立面

       data:
      [
      "persons": []
      ] --------------
      template:
      {{# persons }}
      - {{name}} is {{#alive}}alive{{/alive}}{{^alive}}dead{{/alive}}.
      {{/ persons }}
      {{^ persons }}
      Nobody
      {{/ persons }} -------------
      rendering:
      Nobody --------------
      data:
      [
      "persons": [
      ["name": "Errol Flynn", "alive": false],
      ["name": "Sacha Baron Cohen", "alive": true]
      ]
      ]
      ---------------
      rendering:
      - Errol Flynn is dead.
      - Sacha Baron Cohen is alive.
  • Partial Tags

    1. {{>partial}} , 嵌入其他模块

       douc.mustanche
      Guests:
      {{# guests }}
      {{> person }}
      {{/ guests }} --------------
      person.mustache
      {{ name }} -------------
      data:
      [
      "guests": [
      ["name": "Frank Zappa"],
      ["name": "Lionel Richie"]
      ]
      ] --------------
      rendering:
      Guests:
      - Frank Zappa
      - Lionel Richie
  • Partial Override Tags

    1. {{<layout}}...{{/layout}} , 模板继承

       layout.mustache // title , 和content 可以被覆盖
      <html>
      <head>
      <title>{{$ title }}Default title{{/ title }}</title>
      </head>
      <body>
      <h1>{{$ title }}Default title{{/ title }}</h1>
      {{$ content }}
      Default content
      {{/ content }}}
      </body>
      </html> ---------------
      article.mustuche: {{< layout }} {{$ title }}{{ article.title }}{{/ title }} {{$ content }}
      {{{ article.html_body }}}
      <p>by {{ article.author }}</p>
      {{/ content }} {{/ layout }} ---------------
      data: [
      "article": [
      "title": "The 10 most amazing handlebars",
      "html_body": "<p>...</p>",
      "author": "John Doe"
      ]
      ] ----------------
      rendering: <html>
      <head>
      <title>The 10 most amazing handlebars</title>
      </head>
      <body>
      <h1>The 10 most amazing handlebars</h1>
      <p>...</p>
      <p>by John Doe</p>
      </body>
      </html>

      {{$ title }}...{{/ title }}每次都会被渲染,并且只被渲染一次, no boolean checks, no collection iteration.

      一个模板可以包含很多partial override tags

      避免循环

  • Set Delimiters Tags

    1. {{=<% %>=}}, 让你改变标签分隔符。
  • Comment Tags

    1. {{! Wow. Such comment. }} , 注释
  • paragma Tags

      {{% CONTENT_TYPE:TEXT }}
    {{% CONTENT_TYPE:HTML }}

参考:GRMustache.swift

swift 之 mustache模板引擎的更多相关文章

  1. JS模板引擎-Mustache模板引擎使用实例1-表格树

    1 使用实例代码 1.jsp代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <title> ...

  2. Mustache模板引擎

    Mustache是一个Logic-Less模板引擎,即:零逻辑引擎,原因在于它只有标签,没有流程控制语句,这是它与其它模板引擎不同的地方. Mustache小巧玲珑,几乎用各种语言都实现了一遍. Mu ...

  3. nodejs+Express中使用mustache模板引擎

    由于公司一个seo项目,需要我协助.此项目他人已经开发大半,由于seo需要,使用了服务器端模板引擎.我项目的后端同事说项目是go语音写的,跑项目麻烦,只给了我template和css等静态文件. 为了 ...

  4. 前端数据渲染及mustache模板引擎的简单实现

    早期数据渲染的几种方式 在模板引擎没有诞生之前,为了用JS把数据渲染到页面上,诞生了一系列数据渲染的方式. 最最基础的,莫过于直接使用DOM接口创建所有节点. <div id="roo ...

  5. js模板引擎mustache介绍及实例

    在Javascript中 mustache.js是实现mustache模板系统. Mustache是一种没有逻辑的模板语法.它可以应用于HTML.配置文件.源代码等任何地方. 它通过使用散列或对象中提 ...

  6. 【转】在Express项目中使用Handlebars模板引擎

    原文:http://fraserxu.me/2013/09/12/Using-Handlebarsjs-with-Expressjs/ 最近在用Expressjs做一个项目,前后端都用它来完成.自己之 ...

  7. Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整

    Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...

  8. Javascript模板引擎mustache.js详解

    mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

  9. Mustache.js前端模板引擎源码解读

    mustache是一个很轻的前端模板引擎,因为之前接手的项目用了这个模板引擎,自己就也继续用了一会觉得还不错,最近项目相对没那么忙,于是就抽了点时间看了一下这个的源码.源码很少,也就只有六百多行,所以 ...

随机推荐

  1. 纳税服务系统【异常处理、抽取BaseAction】

    前言 本博文主要讲解在项目中异常是怎么处理的.一般我们都不会直接把后台异常信息返回给用户,用户是看不懂的.让用户看见一大串的错误代码,这是不合理的.因此我们需要对报错进行处理. 我们在开发的时候是使用 ...

  2. 转 Java输入输出流详解(非常详尽)

    转  http://blog.csdn.net/zsw12013/article/details/6534619 通过数据流.序列化和文件系统提供系统输入和输出. Java把这些不同来源和目标的数据都 ...

  3. XML-为XML添加DTD-Schema方法

    以后都按照如下方式为XML添加dtd或者schema 1,一般从源码jar包里找dtd文件,拷贝到自己的本地目录中: 比如mybatis在如下目录中有dtd :~/ mybatis-3.2.2-sou ...

  4. python import xxx 与 from xxx import xx 模块引入的区别

    有如下脚本script1.py: A='aaaa'B='bbbb'C='cccc'print A,B,C 1.命令行交互模式下使用import 导入方式1: >>>import sc ...

  5. JavaScript中的位置屬性

    屏幕中的位置(直接使用,無需前綴): screenLeft.screenTop:除了火狐都支持 screenX.screenY: 窗口的大小(谷歌的inner=outer,直接使用,無需前綴): in ...

  6. Azure Powershell使用已有Image创建ARM非托管磁盘虚拟机

    生成Image映像文件,记录好Image的URL(下面URL为测试URL,具体请参考实际):ImageURL:https://hlmrgstoragen.blob.core.chinacloudapi ...

  7. Django(博客系统):按照时间分层筛选“/blog/article/?create_time__year=2017”,出现问题:Database returned an invalid datetime value. Are time zone definitions for your database installed?

    问题背景 添加文章时间没问题,但为了设定博客文章按照时间分层筛选(创建时间的年份.年月&月份来搜索文章),我在blog这个django app的admin.py的ArticleAdmin类中做 ...

  8. 关于Vue问题记录

    第一次安装Vue时,npm run dev报错处理 1.如果是报错:提示说没找到test这个文件夹 参考资料:https://segmentfault.com/q/1010000010893904 就 ...

  9. Java子线程中的异常处理(通用)

    在普通的单线程程序中,捕获异常只需要通过try ... catch ... finally ...代码块就可以了.那么,在并发情况下,比如在父线程中启动了子线程,如何正确捕获子线程中的异常,从而进行相 ...

  10. http://codeforces.com/contest/828

    哇这是我打的第一场cf,第一题都wa了无数次,然后第二题差几分钟交 ,第二天一交就AC了内心是崩溃的.果然我还是太菜l.... A. Restaurant Tables time limit per ...