一、Mustache 简介:

Mustache 是一个轻逻辑模板解析引擎,它的优势在于可以应用在 Javascript、PHP、Python、Perl 等多种编程语言中。

二、Mustache 语法:

Mustache 的模板语法很简单,就那么几个:
{{keyName}}
{{#keyName}} {{/keyName}}
{{^keyName}} {{/keyName}}
{{.}}
{{<partials}}
{{{keyName}}}
{{!comments}}

传统

传统的写后台ajax过来的数据我们会

$.each(messages.reverse(), function(index, message) {$('#messageList').append('<li><span class="list-title">' +message.userName + '</span>' +'<abbr class="list-timestamp" title="' +message.datePosted + '"></abbr>' +'<p class="list-text">' + message.messageText + '</p></li>');}
});

不停的进行字符串的拼接,那么使用mustache后,我们可以

<div id="wrap2"><script id="myTemplate" type="x-tmpl-mustache">{{#stooges}}<li> hello {{name}} </li>{{/stooges}}</script>
</div>
<script>var data = {"company": "Apple","address": {"street": "1 Infinite Loop Cupertino</br>","city": "California ","state": "CA ","zip": "95014 "},"product": ["Macbook ","iPhone ","iPod ","iPad "],"stooges": [{ "name": "Moe" },{ "name": "Larry" },{ "name": "Curly" }]}var tpl = $("#myTemplate").html();var html = Mustache.to_html(tpl,data);$("#wrap2").append(html)
</script>

{{keyName}}

{{}}就是 Mustache 的标示符,花括号里的 keyName 表示键名,这句的作用是直接输出与键名匹配的键值,例如:

var tpl = '{{company}}';
var html = Mustache.render(tpl, data);
//输出:
Apple

{{#keyName}} {{/keyName}}

以#开始、以/结束表示区块,它会根据当前上下文中的键值来对区块进行一次或多次渲染,例如改写下 Demo 中的 tpl:

var tpl = '{{#stooges}} <li>hello {{name}}</li> {{/stooges}}';
var html = Mustache.render(tpl, data);
//输出:
<li> hello Moe </li>
<li> hello Larry </li>
<li> hello Curly </li>
注意:如果{{#keyName}} {{/keyName}}中的 keyName 值为 null, undefined, false;则不渲染输出任何内容。

{{^keyName}} {{/keyName}}

该语法与{{#keyName}} {{/keyName}}类似,不同在于它是当 keyName 值为 null, undefined, false 时才渲染输出该区块内容。

var tpl = {{^nothing}}没找到 nothing 键名就会渲染这段{{/nothing}};
var html = Mustache.render(tpl, data);
//输出:
没找到 nothing 键名就会渲染这段

{{{keyName}}}

{{keyName}}输出会将等特殊字符转译,如果想保持内容原样输出可以使用{{{}}},例如:

var tpl = '{{#address}} <p>{{{street}}}</p> {{/address}}'
//输出:
<p>1 Infinite Loop Cupertino</br></p>

{{!comments}}

!表示注释,注释后不会渲染输出任何内容。

{{!这里是注释}}
//输出:

参考资料

Mustache初识相关推荐

  1. Mustache模板技术,一个比freemarker轻量级的模板引擎

    一.初识Mustache 同样也是看Dropwizard才知道这个东西的,以前一直是知道诸如freemarker这样的模板引擎,这个是头一次听说,但是听周围的朋友说最早这个东西是出自于JS的,Drop ...

  2. day3----编码-集合-深浅copy-文件操作-函数初识

    day3----编码-集合-深浅copy-文件操作-函数初识 本文档主要内容: 一 编码 二 集合 三 深浅copy 四 文件操作 五 函数初识 首先,我们来看看两个字符串的比较 打开cmd,进入do ...

  3. ⑥python模块初识、pyc和PyCodeObject

    一.模块初识(一) 模块,也叫库.库有标准库第三方库. 注意事项:文件名不能和导入的模块名相同 1. sys模块 import sys print(sys.path) #打印环境变量 print(sy ...

  4. 初识java类的接口实现

    初识java类的接口实现 如果两个类之间不存在继承关系,且两个类都想实现同一个接口,两个类都必须实现接口中全部方法,否则报语法错误 如果两个类之间存在继承关系也想实现同一个接口,父类如果实现了某个接口 ...

  5. vba 编辑combobox内容_初识Visual Basic编辑器并建立一段简单的代码

    大家好,从今日开始我正式推出"VBA之EXCEL应用"教程,这个教程是面向初学人员的教程,教程一共三册,十七个章节,从简单的录制宏实现一直讲到窗体的搭建,都是我们在利用EXCEL工 ...

  6. 16.1、python初识面向对象(1)

    初识面向对象 楔子 你现在是一家游戏公司的开发人员,现在需要你开发一款叫做<人狗大战>的游戏,你就思考呀,人狗作战,那至少需要2个角色,一个是人, 一个是狗,且人和狗都有不同的技能,比如人 ...

  7. 精通Python网络爬虫:核心技术、框架与项目实战.1.1 初识网络爬虫

    摘要 网络爬虫也叫做网络机器人,可以代替人们自动地在互联网中进行数据信息的采集与整理.在大数据时代,信息的采集是一项重要的工作,如果单纯靠人力进行信息采集,不仅低效繁琐,搜集的成本也会提高.此时,我们 ...

  8. 初识mysql数据字段属性_MySQL数据库~~~~初识、基础数据类型

    一 数据库初识 1.1 什么是数据库 数据库(DataBase,简称DB),简而言之可视为电子化的文件柜----存储电子文件的处所,用户可以对文件中的数据运行新增,截取,更新,删除等操作. 所谓数据库 ...

  9. Nancy in .Net Core学习笔记 - 初识Nancy

    原文:Nancy in .Net Core学习笔记 - 初识Nancy 前言 去年11月份参加了青岛MVP线下活动,会上老MVP衣明志介绍了Nancy, 一直没有系统的学习一下,最近正好有空,就结合. ...

最新文章

  1. 《CSS揭秘》第五章:字体排印
  2. ORIG1和ORIG2的运用
  3. python互相转换位置坐标(百度坐标、WGS_84、火星坐标)
  4. C++:求五位学生的总成绩以及平均成绩
  5. php登录实现session记住密码,利用php实现一周之内自动登录存储机制(cookie、session、localStorage)...
  6. UVALive2245 POJ1131 HDU1376 ZOJ1086 Octal Fractions【进制】
  7. phpmyadmin/scripts/setup.php,Linux下phpMyAdmin安装过程中的问题解决
  8. yyuc php,yyuc框架介绍
  9. golang区块链开发的视频教程推荐
  10. ajax jsonp跨域访问,jquery ajax怎么使用jsonp跨域访问
  11. 【网络编程】传输层重点协议详解(UPD+TCP)
  12. Python Spider入门
  13. Netty报错 远程主机强迫关闭了一个现有的连接 异常
  14. Natural Cleaning Solutions
  15. 《拥抱》---梦中好友s:103
  16. 【动态规划】有后效性 DP
  17. python将字符写入excel_Python 爬虫并且将数据写入Excel
  18. 古典密码(单表密码,维吉尼亚密码,普莱费尔密码,一次一密)
  19. 简单又好用的5款小工具软件
  20. 智能电视应用与移动应用开发的比较

热门文章

  1. JDK5.0中JVM堆模型、GC垃圾收集详细解析 .
  2. 接口、类、抽象类、对象的另类解释
  3. nodejs yarn包管理工具
  4. Laravel5.2之Filesystem源码解析(下)
  5. 经典题---数组改“貌”
  6. Could not reliably determine the server's fully qualified domain name
  7. 在线文档预览方案-office web apps
  8. 一步一步写算法(之prim算法 中)
  9. Lintcode363 Trapping Rain Water solution 题解
  10. 美国国安局承包商被捕,被刑事指控盗窃机密