swift 之 mustache模板引擎
用法:
Variable Tags
{{name}}用来渲染值namedatas: let data = ["value": "test"] -----------
template: {{value}} a lession -----------
rendering: test a lession
Section Tags
{{#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
{{^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
{{>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
{{<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
{{=<% %>=}}, 让你改变标签分隔符。
Comment Tags
{{! Wow. Such comment. }}, 注释
paragma Tags
{{% CONTENT_TYPE:TEXT }}
{{% CONTENT_TYPE:HTML }}
swift 之 mustache模板引擎的更多相关文章
- JS模板引擎-Mustache模板引擎使用实例1-表格树
1 使用实例代码 1.jsp代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <title> ...
- Mustache模板引擎
Mustache是一个Logic-Less模板引擎,即:零逻辑引擎,原因在于它只有标签,没有流程控制语句,这是它与其它模板引擎不同的地方. Mustache小巧玲珑,几乎用各种语言都实现了一遍. Mu ...
- nodejs+Express中使用mustache模板引擎
由于公司一个seo项目,需要我协助.此项目他人已经开发大半,由于seo需要,使用了服务器端模板引擎.我项目的后端同事说项目是go语音写的,跑项目麻烦,只给了我template和css等静态文件. 为了 ...
- 前端数据渲染及mustache模板引擎的简单实现
早期数据渲染的几种方式 在模板引擎没有诞生之前,为了用JS把数据渲染到页面上,诞生了一系列数据渲染的方式. 最最基础的,莫过于直接使用DOM接口创建所有节点. <div id="roo ...
- js模板引擎mustache介绍及实例
在Javascript中 mustache.js是实现mustache模板系统. Mustache是一种没有逻辑的模板语法.它可以应用于HTML.配置文件.源代码等任何地方. 它通过使用散列或对象中提 ...
- 【转】在Express项目中使用Handlebars模板引擎
原文:http://fraserxu.me/2013/09/12/Using-Handlebarsjs-with-Expressjs/ 最近在用Expressjs做一个项目,前后端都用它来完成.自己之 ...
- Handlebars的基本用法 Handlebars.js使用介绍 http://handlebarsjs.com/ Handlebars.js 模板引擎 javascript/jquery模板引擎——Handlebars初体验 handlebars.js 入门(1) 作为一名前端的你,必须掌握的模板引擎:Handlebars 前端数据模板handlebars与jquery整
Handlebars的基本用法 使用Handlebars,你可以轻松创建语义化模板,Mustache模板和Handlebars是兼容的,所以你可以将Mustache导入Handlebars以使用 Ha ...
- Javascript模板引擎mustache.js详解
mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...
- Mustache.js前端模板引擎源码解读
mustache是一个很轻的前端模板引擎,因为之前接手的项目用了这个模板引擎,自己就也继续用了一会觉得还不错,最近项目相对没那么忙,于是就抽了点时间看了一下这个的源码.源码很少,也就只有六百多行,所以 ...
随机推荐
- AJAX验证码检查
前言 对于验证码检查我们并不会陌生,我们在学习Session的时候已经使用过了验证码检查了.详细可参考:http://blog.csdn.net/hon_3y/article/details/5479 ...
- js转换字符串为数值的方法
在js读取文本框或者其他表单数据的时候获得的值是字符串类型的,比如两个文本框a和b,假设获得a的value值为11,b的value值为9 ,那么a.value要小于b.value,由于他们都是字符串形 ...
- 第6章 Overlapped I/O, 在你身后变戏法 ---被激发的 Event 对象 -4
以文件 handle 作为激发机制,有一个明显的限制,那就是没办法说出到底是哪一个 overlapped 操作完成了.如果每个文件 handle 只有一个操作等待决定,上述问题其实并不成为问题.但是如 ...
- HDU 5974 数学
A Simple Math Problem Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Ot ...
- NOIP2017SummerTraining0720
这套题,看到第一题就想到了以前做过的运动鞋那道题,然后就往DP这个方向去思考,想来想去每什么思路,然后就去看第二题,第二题一看就是一道最短路的问题,但是它的建图十分困难, 怎么打都不知到该怎么建图,然 ...
- NOIP2017SummerTraining0712
个人感受:打了三个小时不到的第一题,然后也就没有多少时间去搞第二题了,特别是第二题还看到了期望这样的东西,这个难以理解,第三题的树分治,myx大佬说50分好拿,但是我觉得也挺难拿的. 单词检索 时间限 ...
- fitnesse - Variables and Symbols
fitnesse - Variables and Symbols 2017-09-30 目录 1 Variables(静态变量) 1.1 定义及使用 1.2 Variable作用域 1.2. ...
- 全方位解读及介绍windows网络安全及常见攻击方式
本来我就是来逛逛论坛的,可是看到前面有位一样是干网络安全的同行,留下来过的痕迹,发了一篇相对不错的文章,我寻思咱既然来这一趟,也不能显得就比别人差啊.所以我也就写了这一片不算成熟小文章,望各位共勉之哈 ...
- jQuery点击按钮实现div的隐藏和显示切换效果
<script type="text/javascript"> $(function(){ $('#click_event').click(function(){ i ...
- nginx 部署
安装nginx 1)安装pcre 从pcre的官网下载tar.gz包,官网地址为:https://sourceforge.NET/projects/pcre/files/pcre/,在这里我下载的是: ...