jsrender for array 和for object语法
for array 循环数组
循环使用案例
定义数组数据
var data = {
names: ["Maradona","Pele","Ronaldo","Messi"]
}
模版中使用
{{for names}}
<div>
<b>{{: #index+1}}.</b>
<span>{{: #data}}</span>
</div>
{{/for}}
输出结果
1. Maradona
2. Pele
3. Ronaldo
4. Messi
索引可以在循环中通过特殊字面量#index获取,特殊字面量#data相当于this,在本例中表示每一个name。
另jsrender中使用for循环时如使用if等判断时虽然不创建常规数据作用域,但却干扰了隐藏作用域。也就是说,{{if }}不会阻断常规数据(你传入的数据)的可见性,但会干扰隐藏数据(#index、#parent)的可见性。
所以获取索引下标时尽量使用#getIndex()获取索引,避免使用#index,除非你的应用足够简单。
可以尝试下面两者使用后的区别对比
1.
{{for names}}
{{if #data.indexOf("M") == 0}}
<div>
<b>{{: #index+1}}.</b>
<span>{{: #data}}</span>
</div>
{{/if}}
{{/for}}
2.
{{for names}}
{{if #data.indexOf("M") == 0}}
<div>
<b>{{: #getIndex()+1}}.</b>
<span>{{: #data}}</span>
</div>
{{/if}}
{{/for}}
for object 进入object中
这里for不代表循环,表示进入到object对象中。把当前的上下文设置为Object,类似于Handlebars.js中的with。
举个例子:
var data =
{
"title": "The A team",
"members": [
{
"name": "Pete",
"city": "members_city",
"address": {
"city": "address_city",
"city1": "address_city1",
"city2": "address_city2"
}
}
]
}
模版
{{for members}}
{{for address}}
<p>.{{:city}}</p>
{{/for}}
{{/for}}
结果
address_city
从结果可以看出,虽然members的item下也有city属性,但由于通过{{for address}}进入到了address指向的Object中,{{:city}}直接从address中获取了。
同时,address有三个属性,但结果只输出了一行,证明{{for Object}}是不会循环的,仅仅是切换一下this。
jsrender for array 和for object语法的更多相关文章
- JsRender for object 语法说明
JsRender 作为一款JavaScript模版引擎,必不可少的会有循环功能,也就是for,但由于JsRender过于灵活,for竟然可以接受object作为循环对象. {{for Array}}和 ...
- Warning: count(): Parameter must be an array or an object that implements Countable in line 302解决方法
ytkah在调试项目时又弹出一个警告Warning: count(): Parameter must be an array or an object that implements Countabl ...
- typeof操作符,返回数据类型Array.isArray()、Object.prototype.toString.call()
源地址https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/typeof typeof操作符 // N ...
- 表示集合的数据结构:数组(Array),对象(Object),Map和Set
Map和Set是ES6标准新增的数据类型 Map: 是一组键值对的结构,使用一个二维数组来初始化Map,例如: var m = new Map([['xiaohong',100],['xiaolan' ...
- 通过增删改查对比Array,Map,Set,Object的使用成本和实现方式
1.Array 和 Map 对比 { // array and map 增 查 改 删 let map = new Map(); let arr = []; // 增 map.set('a', 1); ...
- java中Array/List/Map/Object与Json互相转换详解
http://blog.csdn.net/xiaomu709421487/article/details/51456705 JSON(JavaScript Object Notation): 是一种轻 ...
- PHP 数组转JSON数据(convert array to JSON object);
<?php header('Content-type: appliction/json; charset=shift-JIS'); $data =array(); class Test { pu ...
- java中Array/List/Map/Object与Json互相转换详解(转载)
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.易于人阅读和编写.同时也易于机器解析和生成.它基于JavaScript Programming Langu ...
- NodeJS对象数组Array 根据对象object key的值排序sort
有个js对象数组 var ary=[{id:1,name:”b”},{id:2,name:”b”}] 需求是根据name 或者 id的值来排序,这里有个风骚的函数. /** * 对数组中的对象,按对象 ...
随机推荐
- jqueryUI小案例
实现上面的功能: <%@ page language="java" import="java.util.*" pageEncoding="utf ...
- git的两本推荐书
1. pro git, 可以网页直接看 http://iissnan.com/progit/?spm=5176.100239.blogcont5843.18.nUJDcK 2. Git权威指南 < ...
- HTML 学习笔记 CSS(选择器)
CSS元素选择器 最常见的CSS 选择器就是元素选择器 换句话说 文档的元素就是最基本的选择器 如果设置HTML样式 选择器通常就是某个HTML元素 比如p h1 em a 甚至可以是HTML本身 h ...
- Docker 总结(转载)
原文链接:http://blog.tankywoo.com/docker/2014/05/08/docker-4-summary.html 查看docker的子命令,直接敲docker或完整的dock ...
- 关于Xcode7.2版本访问相册问题
前些天自己将xcode升级到7.2版本后,在我写的代码中有需要访问到相册的功能,但是却发现被告知无权限 一开始以为是手机问题,在设置里面找也没有找到,然后看代码,但是代码也没问题,后来才发现是我的pl ...
- 2016 08 27 印刷菜单增加sql语句
insert into `module` (`ID`, `CONSONANTCODE`, `CREATEDATE`, `DESCRIPTION`, `HANDLER`, `HASCHILD`, `IC ...
- WPF 4.0 DatePicker 快速录入
WPF 4.0的DatePicker在通过键盘录入日期的时候是非常让人郁闷的.必须按照日期的格式来完整输入例如,比如输入“2010/10/10”才能识别.而实际上在一些要求快速录入的场合,用户更希望直 ...
- HTTP协议详细总结
HTTP超文本传输协议,是WWW上应用的最多的协议.了解和掌握HTTP协议是对程序人员的基本要求. 转载请注明出处 http://www.cnblogs.com/zrtqsk/p/3746891.ht ...
- 模块度与Louvain社区发现算法
Louvain算法是基于模块度的社区发现算法,该算法在效率和效果上都表现较好,并且能够发现层次性的社区结构,其优化目标是最大化整个社区网络的模块度. 模块度(Modularity) 模块度是评估一个社 ...
- hbase-site.xml 配置详解
hbase.rootdir 这个目录是region server的共享目录,用来持久化HBase.URL需要是'完全正确'的,还要包含文件系统的scheme.例如,要表示hdfs中的'/hbase'目 ...