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>

mustache 使用

{{keyName}}

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

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

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

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. vue入门教程 (vueJS2.X)

    vue入门教程vueJS2.X 写在前面 看完此教程可以达到:能看懂并能修改简单的vue项目. 看的过程中,请把所有例子都放到html文件中跑一遍. Vue.js 是什么 Vue.js(读音 /vju ...

  2. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  3. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  4. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  5. Content Security Policy 入门教程

    阮一峰文章:Content Security Policy 入门教程

  6. gulp详细入门教程

    本文链接:http://www.ydcss.com/archives/18 gulp详细入门教程 简介: gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优 ...

  7. UE4新手引导入门教程

    请大家去这个地址下载:file:///D:/UE4%20Doc/虚幻4新手引导入门教程.pdf

  8. ABP(现代ASP.NET样板开发框架)系列之2、ABP入门教程

    点这里进入ABP系列文章总目录 基于DDD的现代ASP.NET开发框架--ABP系列之2.ABP入门教程 ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)” ...

  9. webpack入门教程之初识loader(二)

    上一节我们学习了webpack的安装和编译,这一节我们来一起学习webpack的加载器和配置文件. 要想让网页看起来绚丽多彩,那么css就是必不可少的一份子.如果想要在应用中增加一个css文件,那么w ...

随机推荐

  1. Flask基础(17)-->防止 CSRF 攻击

    CSRF CSRF全拼为Cross Site Request Forgery,译为跨站请求伪造. CSRF指攻击者盗用了你的身份,以你的名义发送恶意请求. 包括:以你名义发送邮件,发消息,盗取你的账号 ...

  2. grep、正则表达式

    1.grep :文本搜索工具 -i:忽略大小写--color:匹配到的内容高亮显示-v:显示没有被模式匹配到的行-o:只显示被模式匹配到的字符串-n:显示匹配到行的行号-E:使用扩展正则表达式-A:后 ...

  3. 夯实Java基础系列20:从IDE的实现原理聊起,谈谈那些年我们用过的Java命令

    本系列文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial 喜欢的话麻烦点下 ...

  4. 搭建docker+swoole+php7 的环境

    最近在学习swoole php扩展,苦恼于其运行环境不能在win系统下运行, 但开发代码一直在win系统上,很无奈,,,, 所以就用docker来代替,舒服~ 有很多相关docker的swoole镜像 ...

  5. mac下安装rabbitmq

    使用homebrew安装rabbitmq,命令如下: brew install rabbitmq 安装的位置如下/usr/local/Cellar/rabbitmq/3.7.18 进入到sbin目录下 ...

  6. slf4j输出变量

    花括号表示占位符,推荐使用

  7. display:none和visibility:hidden的区别?

    css控制元素不可见的方法 { display: none; /* 不占据空间,无法点击 */ } /************************************************* ...

  8. Java 多线程爬虫及分布式爬虫架构探索

    这是 Java 爬虫系列博文的第五篇,在上一篇 Java 爬虫服务器被屏蔽,不要慌,咱们换一台服务器 中,我们简单的聊反爬虫策略和反反爬虫方法,主要针对的是 IP 被封及其对应办法.前面几篇文章我们把 ...

  9. 史上最全docker基础知识汇总

    正文 Docker常用命令 run docker run [OPTIONS] IMAGE [COMMAND] [ARG...] -e设置环境变量:-e username=zhj --name为容器指定 ...

  10. liunx下安装MySQL

    1.安装依赖包:yum -y install gcc gcc-c++ ncurses ncurses-devel cmake bisonyum install -y perl-Module-Insta ...