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循环的使用的更多相关文章

  1. ajax使用中发现的问题与深入扩展(for循环中嵌套ajax)

    在学习ajax的过程中,我曾经遇到过这样的一个问题,为了得到一个详情列表,我要先向服务器去请求得到索引表,简单描述就是ajax中的success中的for循环中再次嵌套了ajax,结果第二层succe ...

  2. for循环中嵌套setTimeout,执行顺序和结果该如何理解?

    这两天在捣鼓作用域的问题,有的时候知识这个东西真的有点像是牵一发而动全身的感觉.在理解作用域的时候,又看到了一道经典的面试题和例子题. 那就是在for循环中嵌套setTimeout延时,想想之前面试的 ...

  3. C# json反序列化 对象中嵌套数组 (转载) 可能会导致循环或多重级联路径。请指定 ON DELETE NO ACTION 或 ON UPDATE NO ACTION,或修改其他 FOREIGN KEY 约束。

    C# json反序列化 对象中嵌套数组 (转载)   看图: 这里可以看到是二层嵌套!!使用C#如何实现?? 思路:使用list集合实现 → 建立类 → list集合 → 微软的   Newtonso ...

  4. for循环中嵌套异步请求问题

    for循环中嵌套了异步请求会导致顺序错乱,用递归代替for循环,可以保证正常执行顺序:

  5. 列表中使用嵌套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 ...

  6. 如何处理ajax中嵌套一个ajax

    在做项目的时候 遇到过第二次了 当我第二次去问'公子'的时候 被吐槽了 原来我以前遇到过 只是忘记了...他老人家竟然还记得... ajax由于他的异步特性 在第一次请求中的循环中嵌套第二个ajax会 ...

  7. [转]如何在 JS 代码中消灭 for 循环

    一,用好 filter,map,和其它 ES6 新增的高阶遍历函数 二,理解和熟练使用 reduce 三,用递归代替循环(可以break!) 四,使用高阶函数遍历数组时可能遇到的陷阱 五,死磕到底,T ...

  8. [Swift通天遁地]二、表格表单-(3)在表格中嵌套另一个表格并使Cell的高度自适应

    ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...

  9. 047 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 09 嵌套while循环应用

    047 01 Android 零基础入门 01 Java基础语法 05 Java流程控制之循环结构 09 嵌套while循环应用 本文知识点:嵌套while循环应用 什么是循环嵌套? 什么是循环嵌套? ...

随机推荐

  1. 移除apsx视图引擎,及View目录下的web.config的作用

    <> 使用Rezor视图引擎的时候移除apsx视图引擎 Global.asax文件 using System; using System.Collections.Generic; usin ...

  2. C/C++ 工具函数 —— 大端模式和小端模式的互换

    小端模式:小在小,大在大:大端模式:小在大,大在小: uint32_t swap_endian(uint32_t val) { val = ((val << 8) & 0xFF00 ...

  3. Java中Array、List、Set、Map

    一.Java中数组 数组用来存放固定数量的同类元素,声明方法: T[] ref,T ref[],如int[] intAry; int intAry[].推荐用T[]的方式,后一种方式为兼容C++习惯写 ...

  4. notepad++ 查找引用(Find Reference)(适用于c c++及各类脚本比如lua、python等)

    在程序开发过程中,程序员经常用到的一个功能就是查找引用(Find Reference),Visual Studio里面的对应功能是“查找所有引用”(Find All References). 我在使用 ...

  5. ROS-Solidworks转URDF

    前言:URDF建模很粗糙,而ros提供了支持sw转urdf的插件,可以使建模更精细化. 一.安装sw_urdf_exporter插件 sw_urdf_exporter插件网址:http://wiki. ...

  6. 在C#中运行PowerShell

    C#中运行PowerShell需要用到System.Management.Automation.dll.在Visual Studio中可以通过NuGet添加引用,package名字为"Sys ...

  7. vue中的事件修饰符

    vue提倡的是在方法中只有对数据的处理,所以提供了事件修饰符用于DOM的事件处理,常用的事件修饰符有以下几个: (1). stop:阻止冒泡(通俗讲就是阻止事件向上级DOM元素传递) 点击内层div的 ...

  8. solarwind之network Atlas

    1.  连接密码为空,连接到Orion     2.  连接后如下图   3.  直接拖动节点即可进行绘制地图   4.  查看它的相关属性          

  9. Aspose.Cells基础使用方法整理

    Aspose.Cells 插件,将web端数据以excel形式导出到客户端. 相关文档: https://blog.csdn.net/djk8888/article/details/53065416 ...

  10. -ms-,-moz-,-webkit-,-o-含义及各浏览器内核整理

    transform:rotate(30deg);                   //统一标识语句 -ms-transform:rotate(30deg);      //-ms代表ie内核识别码 ...