mustache 模板,用于构造html页面内容
Mustache 的模板语法很简单,就那么几个:
{{data}}
{{#data}} {{/data}}
{{^data}} {{/data}}
{{.}}
{{<partials}}
{{{data}}}
{{!comments}}
...
<script type="text/javascript" src="mustache.js"></script>
<script type="text/javascript">
var data = {
"name": " xiaohua ",
"msg": {
"sex": " female ",
"age": " 22 ",
"hobit": " reading "
},
"subject": ["Ch","En","Math","physics"]
}
var tpl = '<p> {{name}}</p>';
var html = Mustache.render(tpl, data);
alert ( html );
</script>
...
{{data}}
{{}}
就是 Mustache 的标示符,花括号里的 data 表示键名,这句的作用是直接输出与键名匹配的键值,例如:
var tpl = '{{name}}';
var html = Mustache.render(tpl, data);
//输出:
xiaohua
{{#data}} {{/data}}
以#
开始、以/
结束表示区块,它会根据当前上下文中的键值来对区块进行一次或多次渲染,例如改写下 Demo 中的 tpl:
var tpl = '{{#msg}} <p>{{sex}},{{age}},{{hobit}}</p> {{/msg}}';
var html = Mustache.render(tpl, data); //输出:
<p> female, 22, reading</p>
注意:如果{{#data}} {{/data}}
中的 data 值为 null, undefined, false;则不渲染输出任何内容。
{{^data}} {{/data}}
该语法与{{#data}} {{/data}}
类似,不同在于它是当 data值为 null, undefined, false 时才渲染输出该区块内容。
1 var tpl = {{^nothing}}没找到 nothing 键名就会渲染这段{{/nothing}};
2 var html = Mustache.render(tpl, data);
3 //输出:
4 没找到 nothing 键名就会渲染这段
{{.}}
{{.}}
表示枚举,可以循环输出整个数组,例如:
1 var tpl = '{{#subject}} <p>{{.}}</p> {{/subject}}';
2 var html = Mustache.render(tpl, data);
3 //输出:
4 <p>Ch</p> <p>En</p> <p>Math</p> <p>physics</p>
{{>partials}}
以>
开始表示子模块,如{{> msg}};当结构比较复杂时,我们可以使用该语法将复杂的结构拆分成几个小的子模块,例如:
var tpl = "<h1>{{namme}}</h1> <ul>{{>msg}}</ul>"
var partials = {msg: "{{#msg}}<li>{{sex}}</li><li>{{age}}</li><li>{{hobit}}</li>{{/msg}
var html = Mustache.render(tpl, data, partials);
//输出:
<h1>xiaohua</h1>
<ul>
<li>female</li>
<li>22</li>
<li>reading</li>
</ul>
{{{data}}}
{{data}}
输出会将等特殊字符转译,如果想保持内容原样输出可以使用{{{}}}
,例如:
1 var tpl = '{{#msg}} <p>{{{age}}}</p> {{/msg}}'
2 //输出:
3 <p>22</p>
{{!comments}}
!
表示注释,注释后不会渲染输出任何内容。
1 {{!这里是注释}}
2 //输出:
mustache 模板,用于构造html页面内容的更多相关文章
- mustache模板技术
一.简介Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的 HTML 文档.当然不同的开发语言有不同模板引擎,如 Javascript 下的 Hog ...
- Swagger结合mustache模板生成后台接口代码、以及前后台建模代码
之前项目中使用的的thrift来建模,维护前后台模型以及rest接口,前台使用的是angular2: 但是使用thrift只能生成建模,后台的rest接口的Controller文件还是需要手动去写,一 ...
- 转 使用utl_http获取某个http页面内容
#########1.ACL详细解释: 11g 对于XDB UTL_HTTP or others package 的权限管控进一步加强,如果需要使用到XDB 以下包 UTL_TCP, UTL_SMT ...
- 基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作
在前面介绍了很多篇相关的<Bootstrap开发框架>的系列文章,这些内容基本上覆盖到了我这个Bootstrap框架的各个主要方面的内容,总体来说基本达到了一个稳定的状态,随着时间的推移可 ...
- web 页面内容优化管理与性能技巧
回想一下,以前我们不得不花费大量时间去优化页面内容(图片.CSS等等),如今用户有更快速的互联网链接,我们似乎能够使用更大的图像或更大的闪存文件,里面包含的有视频或者图片.然而,随着移动开发的兴起,我 ...
- php curl抓取远程页面内容的代码
使用php curl抓取远程页面内容的例子. 代码如下: <?php /** * php curl抓取远程网页内容 * edit by www.jbxue.com */ $curlPost = ...
- dede导航设置成单页面内容
有时顶级导航可能就是一个单页面 如公司简介 联系我们等 方法一:直接在导航栏填写内容 常规设置 二高级选项设置模板 三 填写页面内容 四 模板页面调用 内容 可在栏目模板中用{dede:field.c ...
- 服务端获取客户端html页面内容-2013-6-28-2
客户端怎么提交 整个html页面? 分析: 1>我们知道b/s模式,也知道http协议.服务端想要获取客户端的数据,客户端就 必须提交给它,服务器才能获取到. 2> ...
- 在Bootstrap开发框架的前端视图中使用@RenderPage实现页面内容模块化的隔离,减少复杂度
在很多开发的场景中,很多情况下我们需要考虑抽象.以及模块化等方面的内容,其目的就是为了使得开发的时候关注的变化内容更加少一些,整体开发更加简单化,从而减少开发的复杂度,在Winform开发的时候,往往 ...
随机推荐
- xilinx DMA IP核(一) —— loop测试 代码注释
本篇笔记中的代码来自:米联科技的教程“第三季第一篇的DMA_LOOP环路测试” 硬件的连接如下图所示: 图:DMA Loop Block Design 橘色的线就是DMA加FIFO组成的一个LOOP循 ...
- ActionBarCompat 教程-实现Action Bar
http://www.mobiletuts.me 自Action Bar设计概念在Android 3.0(API 11) 中被Google引入以后,Action Bar这种设计模式迅速被各APP厂商( ...
- ASP.NET MVC利用ActionLink实现动态组合查询
一个文件传输数据表,内有日期.传输协议.传输方向(上传或下载).文件名等信息,完整的表内容显示如下: 现在需要分类查询,即按照协议和传输方向查询.单独的分类查询问题并不大,比如,按协议查询,在View ...
- R302指识别开发笔记
一.相关概念 1.存储容量:500枚指纹,地址范围0-499. 2.用户记事本:模块内部为用户开辟了512Bytes的FLASH空间用于存放用户数据该存储空间称为用户记事本,该记事本逻辑上被分成16个 ...
- 爬虫URL去重
这个要看你想抓取的网页数量是哪种规模的.如果是千万以下用hash表, set, 布隆过滤器基本可以解决,如果是海量的......嗯我也没做过海量的,不过hash表之类的就别想了,内存根本不够,分割线下 ...
- eclipse中提示js或者JQuery代码
当你在eclipse中的JSP中写JavaScript或者JQuery代码的时候,eclipse是不会自动提示的,所以你需要在eclipse中安装一下插件,该插件的名字叫:Spket IDE,它可以作 ...
- 【Qt开发】QDate类
QDate为开发者提供日期的类,函数也很丰富 常用方法介绍 1.QDate addDays(qint64 ndays) const 当前日期添加n天,n可以为负 2.QDate addMonths(i ...
- fgets()函数读取键盘,去掉换行符或丢弃多余的字符
在上一遍随笔中,我们知道可以用fgets()函数来代替不安全的gets()函数.fgets函数中的第二个参数限制了读取的个数. 上篇文章也提到,fgets是会读取回车换行符的.有时候我们并不希望在字符 ...
- Tomcat源码分析——类加载体系
前言 Tomcat遵循J2EE规范,实现了Web容器.很多有关web的书籍和文章都离不开对Tomcat的分析,初学者可以从Tomcat的实现对J2EE有更深入的了解.此外,Tomcat还根据Java虚 ...
- 问题集录--Android:解决Studio新建项目时,在 Building gradle project info 一直卡住
Android Studio导入项目的时候,一直卡在Building gradle project info这一步,主要原因还是因为被墙的结果.gradle官网虽然可以访问,但是速度连蜗牛都赶不上.. ...