doT中嵌套for循环的使用
1.数据结构
var goods = [
{
"id": "1",
"name": "衣服",
"goods": [
{
"goods_id": "1",
"name": "衣服1",
"price": "100",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
},
{
"goods_id": "2",
"name": "衣服2",
"price": "200",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
}
]
},
{
"id": "2",
"name": "鞋子",
"goods": [
{
"goods_id": "3",
"name": "鞋子1",
"price": "100",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
},
{
"goods_id": "4",
"name": "鞋子2",
"price": "200",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
}
]
}
];
2.区域与页面构建
<div id="category-goods"></div>
<!-- 必须加上type="text/x-dot-template" -->
<script id="category-goods-tmpl" type="text/x-dot-template">
{{ for(var i=0, catlen=it.length; i<catlen; i++) { }}
<div class="rxsp">
<div class="aui-pull-left"><h3> {{= it[i].name }} </h3></div>
<a class="aui-pull-right ">
查看更多
<span class="aui-iconfont aui-icon-right"></span>
</a>
</div>
<div class="aui-list-item-inner">
<div class="aui-row aui-row-padded">
{{ for(var j=0, goodslen=it[i]['goods'].length; j<goodslen; j++) { }}
<div class="aui-col-xs-6">
<img src="{{= it[i]['goods'][j].logoimg }}" onclick="openWin('goods_detail')">
<p class="tit">{{= it[i]['goods'][j].name }} </p>
<div class="aui-info" style="padding-top:0">
<div class="aui-info-item">
<span class="red">¥{{= it[i]['goods'][j].price }}<!-- <span class="jifen"> 积分1000</span></span> -->
</div>
</div>
</div>
{{ } }}
</div>
</div>
{{ } }}
</script>
3.调用数据
var goods = [
{
"id": "1",
"name": "衣服",
"goods": [
{
"goods_id": "1",
"name": "衣服1",
"price": "100",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
},
{
"goods_id": "2",
"name": "衣服2",
"price": "200",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
}
]
},
{
"id": "2",
"name": "鞋子",
"goods": [
{
"goods_id": "3",
"name": "鞋子1",
"price": "100",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
},
{
"goods_id": "4",
"name": "鞋子2",
"price": "200",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
}
]
}
];
var evalText = doT.template($("#category-goods-tmpl").text());
$("#category-goods").html(evalText(goods));
4.结果展示
调整结构
var goods_list = {
"list": [
{
"id": "1",
"name": "衣服",
"goods": [
{
"goods_id": "1",
"name": "衣服1",
"price": "100",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
},
{
"goods_id": "2",
"name": "衣服2",
"price": "200",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
}
]
},
{
"id": "2",
"name": "鞋子",
"goods": [
{
"goods_id": "3",
"name": "鞋子1",
"price": "100",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
},
{
"goods_id": "4",
"name": "鞋子2",
"price": "200",
"logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000222/20160723/201607231342158687.png@250h_250w_1e_1c"
}
]
}
]
};
这种结构适用于arttemplate,便于统一结构。
doT中相应调整,
var evalText = doT.template($("#category-goods-tmpl").text());
$("#category-goods").html(evalText(goods_list.list));
doT中嵌套for循环的使用的更多相关文章
- ajax使用中发现的问题与深入扩展(for循环中嵌套ajax)
在学习ajax的过程中,我曾经遇到过这样的一个问题,为了得到一个详情列表,我要先向服务器去请求得到索引表,简单描述就是ajax中的success中的for循环中再次嵌套了ajax,结果第二层succe ...
- for循环中嵌套setTimeout,执行顺序和结果该如何理解?
这两天在捣鼓作用域的问题,有的时候知识这个东西真的有点像是牵一发而动全身的感觉.在理解作用域的时候,又看到了一道经典的面试题和例子题. 那就是在for循环中嵌套setTimeout延时,想想之前面试的 ...
- C# json反序列化 对象中嵌套数组 (转载) 可能会导致循环或多重级联路径。请指定 ON DELETE NO ACTION 或 ON UPDATE NO ACTION,或修改其他 FOREIGN KEY 约束。
C# json反序列化 对象中嵌套数组 (转载) 看图: 这里可以看到是二层嵌套!!使用C#如何实现?? 思路:使用list集合实现 → 建立类 → list集合 → 微软的 Newtonso ...
- for循环中嵌套异步请求问题
for循环中嵌套了异步请求会导致顺序错乱,用递归代替for循环,可以保证正常执行顺序:
- 列表中使用嵌套for循环[i*j for i in range(3) for j in range(3)]
利用嵌套for循环形成一个新列表 [i*j for i in range(3) for j in range(3)]相当于如下代码 li=[] for i in range(3): for j in ...
- 如何处理ajax中嵌套一个ajax
在做项目的时候 遇到过第二次了 当我第二次去问'公子'的时候 被吐槽了 原来我以前遇到过 只是忘记了...他老人家竟然还记得... ajax由于他的异步特性 在第一次请求中的循环中嵌套第二个ajax会 ...
- [转]如何在 JS 代码中消灭 for 循环
一,用好 filter,map,和其它 ES6 新增的高阶遍历函数 二,理解和熟练使用 reduce 三,用递归代替循环(可以break!) 四,使用高阶函数遍历数组时可能遇到的陷阱 五,死磕到底,T ...
- [Swift通天遁地]二、表格表单-(3)在表格中嵌套另一个表格并使Cell的高度自适应
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
- 047 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 09 嵌套while循环应用
047 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 09 嵌套while循环应用 本文知识点:嵌套while循环应用 什么是循环嵌套? 什么是循环嵌套? ...
随机推荐
- 移除apsx视图引擎,及View目录下的web.config的作用
<> 使用Rezor视图引擎的时候移除apsx视图引擎 Global.asax文件 using System; using System.Collections.Generic; usin ...
- C/C++ 工具函数 —— 大端模式和小端模式的互换
小端模式:小在小,大在大:大端模式:小在大,大在小: uint32_t swap_endian(uint32_t val) { val = ((val << 8) & 0xFF00 ...
- Java中Array、List、Set、Map
一.Java中数组 数组用来存放固定数量的同类元素,声明方法: T[] ref,T ref[],如int[] intAry; int intAry[].推荐用T[]的方式,后一种方式为兼容C++习惯写 ...
- notepad++ 查找引用(Find Reference)(适用于c c++及各类脚本比如lua、python等)
在程序开发过程中,程序员经常用到的一个功能就是查找引用(Find Reference),Visual Studio里面的对应功能是“查找所有引用”(Find All References). 我在使用 ...
- ROS-Solidworks转URDF
前言:URDF建模很粗糙,而ros提供了支持sw转urdf的插件,可以使建模更精细化. 一.安装sw_urdf_exporter插件 sw_urdf_exporter插件网址:http://wiki. ...
- 在C#中运行PowerShell
C#中运行PowerShell需要用到System.Management.Automation.dll.在Visual Studio中可以通过NuGet添加引用,package名字为"Sys ...
- vue中的事件修饰符
vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个: (1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的 ...
- solarwind之network Atlas
1. 连接密码为空,连接到Orion 2. 连接后如下图 3. 直接拖动节点即可进行绘制地图 4. 查看它的相关属性
- Aspose.Cells基础使用方法整理
Aspose.Cells 插件,将web端数据以excel形式导出到客户端. 相关文档: https://blog.csdn.net/djk8888/article/details/53065416 ...
- -ms-,-moz-,-webkit-,-o-含义及各浏览器内核整理
transform:rotate(30deg); //统一标识语句 -ms-transform:rotate(30deg); //-ms代表ie内核识别码 ...