最近微信小程序非常火,对于前端开发的程序员是个利好的消息,这里主要记录下微信小程序  Mustache语法。

小程序开发的wxml里,用到了Mustache语法。所以,非常有必要把Mustache研究下。

什么是Mustache?Mustache是一个logic-less(轻逻辑)模板解析引擎,它是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的HTML文档。比如小程序的wxml中的代码:

{{userInfo.nickName}},这里的{{ }}就是Mustache的语法。

1、Mustache的模板语法很简单,就那么几个:

{{keyName}}

{{{keyName}}}

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

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

{{.}}

{{!comments}}

{{>partials}}

1、{{keyName}}

⑴ 简单的变量替换:{{name}}

var data = { "name": "weChat" };

Mustache.render("{{name}} is excellent.",data);

返回 weChat is excellent.

⑵ 变量含有html的代码,如:

、等而不想转义,可以在用{{&name}}

vardata = {

"name":"

weChat

"

};

varoutput = Mustache.render("{{&name}} is excellent.", data);

console.log(output);

返回:

weChat

is excellent.

去掉"&"的返回是转义为:

weChat

is excellent.

另外,你也可以用{{{ }}}代替{{&}}。

⑶ 若是对象,还能声明其属性

vardata = {

"name": {

"first":"Chen",

"last":"Jackson"

},

"age": 18

};

varoutput = Mustache.render(

"name:{{name.first}} {{name.last}},age:{{age}}", data);

console.log(output);

返回:name:Chen Jackson,age:18

2、{{#keyName}} {{/keyName}}

以#开始、以/结束表示区块,它会根据当前上下文中的键值来对区块进行一次或多次渲染。它的功能很强大,有类似if、foreach的功能。vardata = {

"stooges": [ {

"name":"Moe"

}, {

"name":"Larry"

}, {

"name":"Curly"

} ]

};

varoutput = Mustache.render("{{#stooges}}{{name}}{{/stooges}}",

data);

console.log(output);

返回:Moe

Larry

Curly

3、{{^keyName}} {{/keyName}}

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

vardata = {

"name":"

weChat

"

};

vartpl = ‘{{^nothing}}没找到 nothing 键名就会渲染这段{{/nothing}}';

varoutput = Mustache.render(tpl, data);

返回:没找到 nothing 键名就会渲染这段

4、{{.}}

{{.}}表示枚举,可以循环输出整个数组,例如:

vardata = {

"product": ["Macbook ","iPhone ","iPod ","iPad "]

}

vartpl ='{{#product}}

{{.}}

{{/product}}';

varhtml = Mustache.render(tpl, data);

返回:

Macbook

iPhone

iPod

iPad

5、{{!  }}表示注释

6、{{>partials}}

参考文章:http://www.open-open.com/lib/view/open1416792564461.html

http://coenraets.org/blog/2011/12/tutorial-html-templates-with-mustache-js/

http://mustache.github.com/mustache.5.html

http://ued.xinyou.com/2012/07/mustache_5_document.html

来自:http://www.iinterest.net/2012/09/12/web-template-engine-mustache/

作者:大宝来巡山
链接:https://www.jianshu.com/p/ca2659317d02
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

微信小程序 Mustache语法详解的更多相关文章

  1. 微信小程序开发之详解生命周期方法

    生命周期是指一个小程序从创建到销毁的一系列过程 在小程序中 ,通过App()来注册一个小程序 ,通过Page()来注册一个页面 先来看一张小程序项目结构 从上图可以看出,根目录下面有包含了app.js ...

  2. 微信小程序的配置详解

    1.配置详解: 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 1>pages 接受一个数组,每一项都是字符串,来指定小 ...

  3. 微信小程序wxss样式详解

    一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 vie ...

  4. 微信小程序 生命周期函数详解

    微信小程序 生命周期函数 小程序中 判断当前首页是从其他页面返回,还是由入口打开 由于小程序的数据在我们退出小程序时并没有得到释放,因此再次点击开来数据依然没有变成初始化 解决方法:在小程序 data ...

  5. 微信小程序开发者工具详解

    一.微信小程序web开发工具下载地址 1.1 在微信公众平台-小程序里边去下载开发工具下载地址. 1.2 下载后安装一下就可以使用了: 二.创建项目 2.1 微信小程序web开发工具需要扫码登陆,所以 ...

  6. 微信小程序页面传值详解

    我们知道,在微信小程序中,从一个页面转到另一个页面,一般情况下可以通过navigate或redirect时候的url来携带参数,然后在目标页面的onLoad函数参数中获取这些url参数.例如:   / ...

  7. 微信小程序Mustache语法

    小程序开发的wxml里,用到了Mustache语法.所以,非常有必要把Mustache研究下. 什么是Mustache?Mustache是一个logic-less(轻逻辑)模板解析引擎,它是为了使用户 ...

  8. 微信小程序的登陆流程详解

    由于小程序的登陆和登陆状态维护流程比较复杂,需要客户端和服务器的数次交互以及服务器端的相应处理,很多同学都觉得比较麻烦,所以特别写下这篇博客为大家梳理一下微信的登陆流程,同时加深对微信小程序与登陆状态 ...

  9. 微信小程序生命周期详解

    文章出处:https://blog.csdn.net/qq_29712995/article/details/79784222 在我看来小程序的生命周期虽然简单,但是他渗透了小程序开发的整个过程,对于 ...

随机推荐

  1. seleniummaster

    http://seleniummaster.com/sitecontent/index.php/component/banners/click/6 Step 1: create a Java proj ...

  2. Python 基本数据类型详解

    1.数字 int(整型) 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1,即-2147483648-2147483647在64位系统上,整数的位数为64位,取值范围为-2* ...

  3. man cal

    CAL(1)                                                                  CAL(1) NAME       cal - 显示一个 ...

  4. Spring配置文件出错

    问题描述: Element 'xxxxxxx' cannot have character [children],because the type's content type is element- ...

  5. css-外面元素的高度,由里面的元素进行撑开(由内部的高度决定)

    1.删除你的高度的固定值 2.将父元素的====>display:inline-block; 或者设置浮动====>float:left;

  6. jquery-时间轴滑动

    效果预览图: html: <div class="tim"> <div class="timdiv"> <div class=&q ...

  7. webstorm注册码,亲测2016.1.1版

    打开webstorm,点击帮助,注册 注册时,在打开的License Activation窗口中选择“License server”,在输入框输入下面的网址: http://idea.iteblog. ...

  8. java上传大文件(局域网环境)

    文件上传是最古老的互联网操作之一,20多年来几乎没有怎么变化,还是操作麻烦.缺乏交互.用户体验差. 一.前端代码 英国程序员Remy Sharp总结了这些新的接口 ,本文在他的基础之上,讨论在前端采用 ...

  9. 【PowerOJ1736&网络流24题】飞行员配对方案问题(最小割)

    题意: n<=100,要求输出方案 思路:准备把没刷的24题从头搞一遍 输出方案的话就在增广的时候记一下另一端的编号就好 #include<bits/stdc++.h> using ...

  10. 设计模式学习笔记——Composite 组合模式

    用于描述无限层级的复杂对象,类似于描述资源管理器,抽象出每一个层级的共同特点(文件夹和文件,展开事件) 以前描述一个对象,是将整个对象的全部数据都描述清楚,而组合模式通过在对象中定义自己,描述自己的下 ...