mustache 的使用

前些日子做个H5嵌入手机的应用，用到了mustache.js,于是就做个如下的简单介绍，如有错误请指出，万分感谢。最后会把项目中的如何用怎么用会贴出部分代码。mustache.js 它是一个javascript的模板引擎库，就像java模板引擎velocity一样，只是提供展示信息的模板，其语法简单明了，容易上手。

一个简单的demo：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><script src="js/jquery-1.10.2.min.js"></script><script src="js/mustache.js" ></script></head><body><div id="box"><script id='template'>{{name}}</script></div></body><script>var data = {"name":"wb","age" :27,"birth":"10-06","school":"阜阳师范","major":["数学","计算机"],"has_car":false,"car":null,"has_house":true,"msg":{"hate":"dog","love":"beautiful girl"}}$("#box").append(Mustache.render($('#template').html(),data));</script>
</html>

1. {{name}}

{{ }}就是 mustache 输出值得简单格式，花括号中为json的key值。直接运行上述html，会看到结果为：wb

2. {{#major}} {{/major}}

以#开始、以/结束表示区块，可以一次或多次渲染内容有if、foreach功能。修改如下：<script id='template'>{{#major}}{{.}}{{/major}}</script>输出：数学 计算机
注意：如果{{#major}} {{/major}}中的 major值为 null, undefined, false；则不渲染输出任何内容。

3. {{^car}} {{/car}}

和第2个语法差不多，只不过当值为 null, undefined, false 时才渲染输出该区块内容。<script id='template'>{{^car}}"当值为 null, undefined, false 时才渲染输出该区块内容";{{/car}}</script>
输出：当值为 null, undefined, false 时才渲染输出该区块内容

4. {{.}}

表示集合中的枚举，如实例2

5. {{>parent}}

以>符号表示子模块，可以将复杂的结构拆分为多个子模块。如下：<script id='template'><ul>{{>msg}}</ul></script>var son = {"msg":"{{#msg}} <li>{{hate}}</li> <li>{{love}}</li> {{/msg}}"}$("#box").append(Mustache.render($('#template').html(),data,son));输出：dogbeautiful girl

6. {{!comments}}

以!开头，为注释说明内容，不渲染该内容，如下：
<script id='template'>{{!这里是注释}}{{name}}</script>
输出：wb

下面是在项目中的应用：
1. 通过ajax，返回数据data，成功后遍历data。js文件：

 var feedbackList = [];//遍历列表for(var i=0;i<data.list.length;i++){var id = data.list[i].id;var createTimeStr = data.list[i].createTimeStr;var questionDesc = data.list[i].questionDesc;var billTypeName = data.list[i].billTypeName;var billCode =  data.list[i].billCode;// 放入预先准备好的集合中                           feedbackList.push({"id":id,"createTimeStr":createTimeStr,"questionDesc":questionDesc,"billTypeName":billTypeName,"billCode":billCode});}var renderData = {"feedbackList":feedbackList};$(".recordBox").append(Mustache.render($('#template').html(), renderData));

渲染html上的模板：

<div class="recordBox"><script type='text/x-mustance' id='template'>{{#feedbackList}}<div class='tab'><div class='e-row recordItem'><a href='/feedback/queryDetail?id={{id}}'><h4><b>{{createTimeStr}}</b><span>NO.{{id}}</span></h4><p>{{questionDesc}}</p><div>{{#billTypeName}} {{billTypeName}}:{{billCode}}{{/billTypeName}}</div></a></div></div>{{/feedbackList}}</script></div>

mustache 的使用相关推荐

mustache 渲染文本一直渲染不出来
今天在模板上页面上渲染文本但是渲染了半天,什么也没有渲染出来为什么呢,你看我前台的html页面如此: <script type="text/x-template" id= ...
Mustache初识
一.Mustache 简介: Mustache 是一个轻逻辑模板解析引擎,它的优势在于可以应用在 Javascript.PHP.Python.Perl 等多种编程语言中. 二.Mustache 语法: ...
mustache模板技术
一.简介 Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的 HTML 文档.当然不同的开发语言有不同模板引擎,如 Javascript 下的 Ho ...
Mustache.js和Handlebars.js有什么区别？
本文翻译自:What are the differences between Mustache.js and Handlebars.js? Major differences I've seen ar ...
mustache语法转自小花大方
mustache语法 mustache 模板,用于构造html页面内容.在实际工作中,当同一个模板中想要调用不同的函数来渲染画面,在已经自定义好了的前提下,可以在渲染页面时对传入的参数进行手动判断.[ ...
Web模板引擎—Mustache
Web模板引擎--Mustache 2012年9月12日 BY BELL·12 COMMENTS Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的 ...
Mustache 中的html转义问题处理
避免在使用Mustache引擎是发生html字符转义 1,模板代码示例: var xml= " <?xml version="1.0" encoding=& ...
javascript库之Mustache库使用说明
一.简单示例代码: 1 function show(t) { 2 $("#content").html(t); 3 } 4 5 var view = { 6 title: 'YZ ...
Mustache.js使用笔记（内容属于转载总结）
1.Mustache的语法很简单,用两个大括号标记要绑定的字段即可,"{{}}" Mustache主要的渲染方法为Mustache.render(),该方法有两个参数,第一个为要渲 ...
mustache,用{{}}获取值
{{}}是属于java mustache controller类设置保存对象值在cars-common中有引入mustache.js,web再引入cars-common.jar包 <bean ...

mustache 的使用

mustache 的使用相关推荐

最新文章

热门文章