Mustache.js 嵌套数组使用方法

时间：2014-08-16 编辑：简简单单来源：一聚教程网

如果观察Mustache1模板的填充数据，会发现最深层的通常是一个对象，对象的key在mustache模板中占位，value值则显示在key所占的位置。
如下模板：

代码如下	复制代码
* {{name}} * {{age}} * {{place}} * {{{place}}} 数据： { "name": "陈三", "place": "福州平潭" }

渲染结果：
* 陈三
*
* <b>福州平潭</b>
* 福州平潭
以上示例十分直观。但碰到value是数组时，Mustache模板就显得委婉。
它引入一个Section(块)的概念，从{{#key}}开始，以{{/key}}结尾。Section会根据value值的情况渲染出一个或多个Section中包含的代码。
如下模板：

代码如下

复制代码

{{/person}}
数据：
{
person: [
"name": "陈三",
"name": "陈四"
]
}
渲染的结果会是：

陈三

陈四

但我们常常是根据数据来写模板的。
比如：

代码如下	复制代码
{ person: [ "陈三", "陈四" ] }

这个数据里，value值是一个数组，数组中的单个组成并没有显式的key存在。这时，模板是这样写的：

代码如下	复制代码
{{#person}} {{.}} {{/person}}

如果你用过Linux系统，会十分清楚，.号表示当前目录。模板中的.则表示数据的当前上下文环境，因为value是一个数组，所以Mustache模板在解析时会自动循环输出。
渲染的结果是：

陈三

陈四

再来看一组有嵌套的数据：

代码如下	复制代码
{ person: [ {'lastName': '陈', firstName: ['三', '四']}, {'lastName': '王', firstName: ['二']} ] } 我希望渲染的结果如下：陈三四王二

这个模板的写法如下：

代码如下	复制代码
{{#person}} {{lastName}} {{#firstName}} {{.}} {{/firstName}} {{/person}}

模板写成这样，我个人觉得，已经颇为失败。因为直观度降了很多，初学者不认真琢磨，恐怕不能一眼看明白。
另外，如果你想输出数组的索引(index)值，Mustache语法并不支持，Ractive.js2对其做了扩展，甚至支持输出key本身的值。

上一个：解决PJBlog3发表日志initUBB is not defined错误
下一个： Emmet for Brackets禁用CSS浏览器前缀的方法

推荐专题

最新下载

热门教程

Mustache.js 嵌套数组使用方法

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程