微信小程序 Mustache语法详解
最近微信小程序非常火,对于前端开发的程序员是个利好的消息,这里主要记录下微信小程序 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":"
"
};
varoutput = Mustache.render("{{&name}} is excellent.", data);
console.log(output);
返回:
is excellent.
去掉"&"的返回是转义为:
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":"
"
};
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语法详解的更多相关文章
- 微信小程序开发之详解生命周期方法
生命周期是指一个小程序从创建到销毁的一系列过程 在小程序中 ,通过App()来注册一个小程序 ,通过Page()来注册一个页面 先来看一张小程序项目结构 从上图可以看出,根目录下面有包含了app.js ...
- 微信小程序的配置详解
1.配置详解: 使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径.窗口表现.设置网络超时时间.设置多 tab 等. 1>pages 接受一个数组,每一项都是字符串,来指定小 ...
- 微信小程序wxss样式详解
一.wxml 界面结构wxmL比较容易理解,主要是由八大类基础组件构成: 一.视图容器(View Container): 二.基础内容(Basic Content) 组件名 说明 组件名 说明 vie ...
- 微信小程序 生命周期函数详解
微信小程序 生命周期函数 小程序中 判断当前首页是从其他页面返回,还是由入口打开 由于小程序的数据在我们退出小程序时并没有得到释放,因此再次点击开来数据依然没有变成初始化 解决方法:在小程序 data ...
- 微信小程序开发者工具详解
一.微信小程序web开发工具下载地址 1.1 在微信公众平台-小程序里边去下载开发工具下载地址. 1.2 下载后安装一下就可以使用了: 二.创建项目 2.1 微信小程序web开发工具需要扫码登陆,所以 ...
- 微信小程序页面传值详解
我们知道,在微信小程序中,从一个页面转到另一个页面,一般情况下可以通过navigate或redirect时候的url来携带参数,然后在目标页面的onLoad函数参数中获取这些url参数.例如: / ...
- 微信小程序Mustache语法
小程序开发的wxml里,用到了Mustache语法.所以,非常有必要把Mustache研究下. 什么是Mustache?Mustache是一个logic-less(轻逻辑)模板解析引擎,它是为了使用户 ...
- 微信小程序的登陆流程详解
由于小程序的登陆和登陆状态维护流程比较复杂,需要客户端和服务器的数次交互以及服务器端的相应处理,很多同学都觉得比较麻烦,所以特别写下这篇博客为大家梳理一下微信的登陆流程,同时加深对微信小程序与登陆状态 ...
- 微信小程序生命周期详解
文章出处:https://blog.csdn.net/qq_29712995/article/details/79784222 在我看来小程序的生命周期虽然简单,但是他渗透了小程序开发的整个过程,对于 ...
随机推荐
- seleniummaster
http://seleniummaster.com/sitecontent/index.php/component/banners/click/6 Step 1: create a Java proj ...
- Python 基本数据类型详解
1.数字 int(整型) 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1,即-2147483648-2147483647在64位系统上,整数的位数为64位,取值范围为-2* ...
- man cal
CAL(1) CAL(1) NAME cal - 显示一个 ...
- Spring配置文件出错
问题描述: Element 'xxxxxxx' cannot have character [children],because the type's content type is element- ...
- css-外面元素的高度,由里面的元素进行撑开(由内部的高度决定)
1.删除你的高度的固定值 2.将父元素的====>display:inline-block; 或者设置浮动====>float:left;
- jquery-时间轴滑动
效果预览图: html: <div class="tim"> <div class="timdiv"> <div class=&q ...
- webstorm注册码,亲测2016.1.1版
打开webstorm,点击帮助,注册 注册时,在打开的License Activation窗口中选择“License server”,在输入框输入下面的网址: http://idea.iteblog. ...
- java上传大文件(局域网环境)
文件上传是最古老的互联网操作之一,20多年来几乎没有怎么变化,还是操作麻烦.缺乏交互.用户体验差. 一.前端代码 英国程序员Remy Sharp总结了这些新的接口 ,本文在他的基础之上,讨论在前端采用 ...
- 【PowerOJ1736&网络流24题】飞行员配对方案问题(最小割)
题意: n<=100,要求输出方案 思路:准备把没刷的24题从头搞一遍 输出方案的话就在增广的时候记一下另一端的编号就好 #include<bits/stdc++.h> using ...
- 设计模式学习笔记——Composite 组合模式
用于描述无限层级的复杂对象,类似于描述资源管理器,抽象出每一个层级的共同特点(文件夹和文件,展开事件) 以前描述一个对象,是将整个对象的全部数据都描述清楚,而组合模式通过在对象中定义自己,描述自己的下 ...