文档章节

Mustache遍历JSON/Array

cyper
 cyper
发布于 2015/11/25 18:57
字数 215
阅读 176
收藏 1
点赞 0
评论 0

基本用法:

var html = Mustache.to_html(template, data);
$('#content').html(html)


总结一句话,如果传入的data是个数组,用点表示这个无名的数组。
而{{#blah}} ... {{/blah}}是被重载过的,碰到数组就会遍历,碰到对象就会进去。

##带key的

The array itself should be a value in a bigger Object, like so:

var obj = {
  arr: [
    {"id": "1", "details": {"name": "X", "type":"Y" }},
    {"id": "2", "details": {"name": "aName", "type":"something" }}
  ]
}

Then you can do:

{{#arr}}
   my id: {{id}}
{{/arr}}

the use for {{#bla}} is actually overloaded. When the property it acts upon is an array it will loop. When the property is an object itself it will 'enter' that object. Given your example:

{{#arr}}
   my id: {{id}} <br/>
   {{#details}}
     and my name: {{name}}
   {{/details}}
{{/arr}}

##keyless不带key的(使用.语法)

I found another way of doing this which is pretty similar to Geert-Jan except that you do not have to assign the array to a Javascript object.

{{ #. }}
   <p> {{ id }} </p>
   <ul> {{#details}}
        {{name }}
        {{ type }}
   {{/details}}
   </ul>
{{ /. }}

来自: http://stackoverflow.com/questions/11891123/mustache-js-iterate-over-a-list-received-via-json

© 著作权归作者所有

共有 人打赏支持
cyper

cyper

粉丝 58
博文 685
码字总数 143161
作品 0
武汉
前端工程师
Node.js模板引擎(Hanldlebars)

Handlebars 是基于jQuery的插件,以json对象为数据源,支持逻辑判断,循环操作等。 60k左右。 采用Logic-less template(无逻辑模板),加载时被预编译,而不是到了客户端执行代码时再去编译...

jedi_knight
2015/10/20
53
0
SQL老司机,在SQL中计算 array & map & json数据

场景 通常,我们处理数据,一列数据类型要么是字符串,要么是数字,这些都是primitive类型的数据。在某些比较复杂的业务场景下,我们会在一列中使用复杂的格式,例如数组array, 对象(map),j...

云雷
06/19
0
0
jquery grep()筛选遍历数组

转自:http://www.wufangbo.com/jquery-each-json/ jquery grep()筛选遍历数组 $().ready( function(){ var array = [1,2,3,4,5,6,7,8,9]; var filterarray = $.grep(array,function(value)......

GeminiLiu
2014/02/12
0
0
将XML文件内容转换成json格式

package com.lieni.ruyu.api.xmlTool; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.IOException; import java.io.Unsuppo......

newdeng
前天
0
0
用 JSON 表现树的结构兼谈队列、堆栈的练习(一)

K/V 与 Array 接触 JSON 的人都知道,JSON 可通过 K/V(Key/Value) 结构很直观地表现一棵树,因为 V 可以“包含”另外一个 K/V 从而不断嵌套下去形成“树状”的结构。但 V 不一定必须为另外...

zhangxin09
2017/08/02
0
0
ES5_6_7(1)——ES5

1. ECMA简述 ECMA是脚本语言规范,是由ECMA国际组织制定和发布的脚本语言规范。而 JavaScript 就是其规范的一种实现。当然了,类似的还有其它脚本语言。但习惯性的把术语 ECMAScript 和 Java...

1160636144
2017/01/07
0
0
jquery遍历json

概述 概述 JSON(javascript Object Notation) 是一种轻量级的数据交换格式,采用完全独立于语言的文本格式,是理想的数据交换格式。同时,JSON是 JavaScript 原生格式,这意味着在 JavaScri...

iiiiiSKY
2016/04/01
79
0
JavaScript 模板引擎--fragment.js

Fragment.js 允许你加载 html 碎片到任何元素中,只需要使用 data-fragment 属性。 <div data-fragment="fragment.html"></div> 也可通过 JSON 进行加载,如: <div data-fragment-json="fra......

匿名
2013/03/24
2.3K
0
mustache.js (hogan.js) API中文版

翻译API文档,如有疏漏,还望读者不吝赐教。 英文原文地址 名称 mustache - Logic-less模板. 概要 典型Mustache模板示例: hash: 输出: 引言 可用于HTML,配置文件,源代码等,通过扩展标签(Ta...

wobuzhidao_
2014/03/05
0
0
如何使用jquery处理json数据

如摘要所说,json是常用的前后端交互的数据格式,本文简单介绍jquery如何解析json数据,以备忘。 如下是一个嵌套的json: [{"name":"20:00-21:15","price":"1.00"},{"name":"17:30-17:59","...

fzxu_05
2014/03/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

JAVA 三种WebService 规范

JAVA 中共有三种WebService 规范,分别是JAX-WS(JAX-RPC)、JAXM&SAAJ、JAX-RS。 1. Jaxws(掌握) JAX-WS 的全称为 Java API for XML-Based Webservices ,早期的基于SOAP 的JAVA 的Web 服务...

onedotdot
7分钟前
0
0
将博客搬至CSDN

将博客搬至CSDN

xpbob
8分钟前
0
0
TensorFlow 拟合异或 one-hot方式

增加隐含层数目 之前是按照计算出的数值按照0.5分为0和1,现在是算出向量,用维度较大的作为结果 import tensorflow as tfimport numpy as np# 网络结构:2维输入 --> 2维隐藏层 --> ...

阿豪boy
11分钟前
0
0
Aidl进程间通信详细介绍

目录介绍 1.问题答疑 2.Aidl相关属性介绍 2.1 AIDL所支持的数据类型 2.2 服务端和客户端 2.3 AIDL的基本概念 3.实际开发中案例操作 3.1 aidl通信业务需求 3.2 操作步骤伪代码 3.3 服务端操作...

潇湘剑雨
26分钟前
0
0
python爬虫日志(3)下载图片

import urlliburl='https://xxx.jpg'#图片地址res=urllib.request.urlopen(url)#此函数用于对url的访问data=res.read() #字节流with open(r'D:\1.jpg',"wb") as code: c...

茫羽行
43分钟前
0
0
vue中$emit的用法

1、父组件可以使用 props 把数据传给子组件。 2、子组件可以使用 $emit 触发父组件的自定义事件。 vm.$emit( event, arg ) //触发当前实例上的事件 vm.$on( event, fn );//监听event事件后运...

JamesView
52分钟前
0
0
bash审计系统搭建

step1:使用saltstack工具bash部署>>>>>> # salt -N clienta state.sls audit step2:安装elasticsearch>>>>>> 注意: 1.不能以root用户进行启动,需要创建用户,并对解压的elasticsearch目录赋......

硅谷课堂
53分钟前
0
0
Linux sar性能分析

Linux使用sar进行性能分析 sar简介 sar命令常用格式 sar常用性能数据分析 整体CPU使用统计-u 各个CPU使用统计-P 内存使用情况统计-r 整体IO情况-b 各个IO设备情况-d 网络统计-n sar日志保存-...

易野
54分钟前
0
0
用 Python 实现打飞机,让子弹飞吧!

所用技术和软件 python 2.7 pygame 1.9.3 pyCharm 准备工作 安装好 pygame 在第一次使用 pygame 的时候,pyCharm 会自动 install pygame。 下载好使用的素材。 技术实现 初始化 pygame 首先要...

猫咪编程
今天
0
0
MySQL的行锁和表锁

简单总结一下行锁和表锁。 行锁 每次操作锁住一行数据。开销大,加锁慢;会出现死锁;锁定粒度最小,发生锁冲突的概率最低,并发度也最高。 表锁 每次操作锁住整张表。开销小,加锁快;不会出...

to_ln
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部