mustache 的使用
前些日子做个H5嵌入手机的应用，用到了mustache.js,于是就做个如下的简单介绍，如有错误请指出，万分感谢。最后会把项目中的如何用怎么用会贴出部分代码。
mustache.js 它是一个javascript的模板引擎库，就像java模板引擎velocity一样，只是提供展示信息的模板，其语法简单明了，容易上手。一个简单的demo：
<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，会看到结果为：wb2. {{#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. {{.}}
表示集合中的枚举，如实例25. {{>parent}}
以>符号表示子模块，可以将复杂的结构拆分为多个子模块。如下：
<script id='template'>
{{>msg}}
</ul>
script>
var son = {"msg":"{{#msg}} <li>{{hate}}li> <li>{{love}}li> {{/msg}}"}
$("#box").append(Mustache.render($('#template').html(),data,son));
输出：
dog
beautiful girl6. {{!comments}}
以!开头，为注释说明内容，不渲染该内容，如下：
<script id='template'>
{{!这里是注释}}
{{name}}
script>
输出：wb下面是在项目中的应用：
1. 通过ajax，返回数据data，成功后遍历data。js文件：
var feedbackList = [];
//遍历列表
for(var i=0;ilist.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}}
class='tab'>
<div class='e-row recordItem'>
<a href='/feedback/queryDetail?id={{id}}'>
{{createTimeStr}}</b>NO.{{id}}</span>h4>
<p>{{questionDesc}}</p>
{{#billTypeName}} {{billTypeName}}:{{billCode}}{{/billTypeName}}</div>
a>
div>
div>
{{/feedbackList}}
script>
div>