doT.js变量和数组混合读取方式
- 可以包裹任意大小的html
- 变量在其包裹的任意区域都有效
- 单个变量可以和数组分开展示
- 最好放置在最下方执行js
数据结构
var data = {
"id": "1280",
"name": "漂亮的衣服",
"price": "100",
"oprice": "150",
"goods_img": [
"http://image.diandodo.com/zhudianbao/Uploads/User/u1250000189/20160718/a/578c97464f436.jpg@1000w",
"http://image.diandodo.com/zhudianbao/Uploads/User/u1250000189/20160718/d/578c973b1fa40.jpg@1000w",
"http://image.diandodo.com/zhudianbao/Uploads/User/u1250000189/20160718/6/578c973352e0f.jpg@1000w"
]
};
区域div
<div id="info_area"></div>
包裹区域
<script id="goodstmpl" type="text/x-dot-template">
...
</script>
单个变量使用
<div class="aui-title">{{= it.name}}</div>
变量中数组使用
方式1
{{ for(var prop in it['goods_img']) { }}
<div class="swiper-slide li">
<a href="javascript:;">
<img src="{{= it['goods_img'][prop] }}"
data-img="{{= it['goods_img'][prop] }}">
</a>
</div>
{{ } }}
方式2
{{~ it.goods_img:v}}
<div class="swiper-slide li">
<a href="javascript:;">
<img src="{{= v }}"
data-img="{{= v }}">
</a>
</div>
{{~}}
方式3
{{ for(var prop in it['goods_img']) { }}
{{ var v = it['goods_img'][prop]; }}
<div class="swiper-slide li">
<a href="javascript:;">
<img src="{{= v }}"
data-img="{{= v }}">
</a>
</div>
{{ } }}
JS处理
var interText = doT.template($("#goodstmpl").text());
$("#info_area").html(interText(data));
小结
很好用~
doT.js变量和数组混合读取方式的更多相关文章
- js变量作为数组对象的键值方法
js变量作为数组对象的键值方法,变量键值获取数组值 js也可以像php的数组一样用下标获取数组的值,方法是: var arr = {'key':'abc'}; var key = 'key'; con ...
- 我总结的js变量、数组、对象等基础知识
我的第一篇博客 ——JS的那些基础概念 第一次写,也不知道有没有什么套路,需不需要注意文采之类的.不管了,我就直接写主要内容吧!下面是我总结的一些关于JS的基础概念: [变量]从字面上面,变量是可变的 ...
- js变量及其作用域(附例子及讲解)
Javascript和Java.C这些语言不同,它是一种无类型.弱检测的语言.它对变量的定义并不需要声明变量类型,我们只要通过赋值的形式,可以将各种类型的数据赋值给同一个变量 工具/原料 Ch ...
- js变量及其作用域
Javascript和Java.C这些语言不同,它是一种无类型.弱检测的语言.它对变量的定义并不需要声明变量类型,我们只要通过赋值的形式,可以将各种类型的数据赋值给同一个变量 一.js变量的类型及 ...
- doT.js实现混合布局,判断,数组,函数使用,取模,数组嵌套
doT.js实现混合布局 数据结构 { "status": "1", "msg": "获取成功", "info ...
- js便利关联数组 及数组定义方式 分类
"http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv=& ...
- 使用jQuery匹配文档中所有的li元素,返回一个jQuery对象,然后通过数组下标的方式读取jQuery集合中第1个DOM元素,此时返回的是DOM对象,然后调用DOM属性innerHTML,读取该元素 包含的文本信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 前端(十一)—— JavaScript基础:JS存在的位置、JS变量定义、调试方式、JS数据类型、运算符
JS存在的位置.JS变量定义.调试方式.JS数据类型.运算符 一.JS语言介绍 1.概念 浏览器脚本语言 可以编写运行在浏览器上的代码程序 属于解释性.弱语言类型编程语言 2.组成 ES语法:ECMA ...
- 多动手试试,其实List类型的变量在页面上取到的值可以直接赋值给一个js的Array数组变量
多动手试试,其实List类型的变量在页面上取到的值可以直接赋值给一个js的Array数组变量,并且数组变量可以直接取到每一个元素var array1 = '<%=yearList =>'; ...
随机推荐
- 编写函数int count_number_string(char str[])和函数int maxnum_string(char str[])
题目如图: 这里不再赘述 代码: //字符串中统计与查询 //杨鑫 #include <stdio.h> #include <stdlib.h> #include <st ...
- spring-boot系列:(一)整合dubbo
spring-boot-2整合dubbo 新框架学习,必须上手干.书读百遍,其义自见. 本文主要介绍spring-boot-2整合dubbo,使用xml配置实现一个provider和consumer. ...
- BZOJ 1818 线段树+扫描线
思路: 可以把题目转化成 给你一些沿坐标轴方向的线段 让你求交点个数 然后就线段树+扫描线 搞一搞 (线段不包含断点 最后+n 这种方式 比线段包含断点+各种特判要好写得多) //By SiriusR ...
- Python的四个内置数据类型list, tuple, dict, set
Python语言简洁明了,可以用较少的代码实现同样的功能.这其中Python的四个内置数据类型功不可没,他们即是list, tuple, dict, set.这里对他们进行一个简明的总结. List ...
- 复杂一些的SQL语句
表连接查询得到结果集后添加数据 INSERT INTO #saleSplitProduct(saleorderID,ProductCode,ProductNum,ProductPrice, produ ...
- 多线程与MySQL(十)
1.1 多线程 在传统操作系统中,每个进程有一个地址空间,而且默认就有一个控制线程 线程顾名思义,就是一条流水线工作的过程,一条流水线必须属于一个车间,一个车间的工作过程是一个进程 车间负责把资源整合 ...
- PHP 导出excel 数据量大时
public function ceshiexcel1(){ set_time_limit(0); $filename = '病毒日志'; header('Content-Type: applicat ...
- Android Span的简单使用
Spanable中的常用常量: Spanned.SPAN_EXCLUSIVE_EXCLUSIVE --- 不包含start和end所在的端点 (a,b) Span ...
- Win7 disk.sys无法加载的问题
Win7突然无法启动,应该说是启动中卡死,没有别的问题,用安全模式,显示加载disk.sys时卡死.搜索发现很多人遇到这个问题. 实际解决方法是查看数据线,重新插拔,换口,换线. 数据线出现故障往往表 ...
- TCP基本概念
TCP协议是一个复杂的.可靠的字节流协议.不通用UDP协议. TCP提供客户与服务器之间的连接.TCP客户先与给定的服务器建立一个连接,再跨该连接与服务器交换数据,最后终止这个连接. TCP提供了可靠 ...