apicloud项目循环遍历ret数据显示在html页面上

最好的方法是doT模板

首先引入dot.js文件

1、你可以直接用下面的代码引用

2、也可以用浏览器打开这个地址，然后复制里面的内容到txt文件里面，然后更改后缀名为.js

<script src="https://cdn.bootcss.com/dot/1.1.2/doT.js"></script>

---

请求后端数据的代码如下 

  //从后台查询数据到前台来
      api.ajax({
              url: 'http://192.168.1.34:8000/news/query/',
              dataType: 'json',
              method: 'post',
              timeout: 10
      }, function(ret, err) {
          api.hideProgress();
          var texts=  doT.template($("#testTemplate").text());
          $("#test").html(texts(eval(ret.list)));
          api.parseTapmode();
          /*** 登录异常 ***/
          if (err) {
              api.toast({
        　　　　　　msg:'网络异常，请稍后重试',
        　　　　　　duration: '1300',
        　　　　　　localtion: 'middle'
      　　　　 });
              return;
          }
        })
      //从后台查询数据到前台来

我的ret.list数据是这样的

[{
	"model": "news.news",
	"pk": 1,
	"fields": {
		"newsname": "4\u670821\u65e5 | \u5317\u4eac\u51fa\u53d1",
		"title": "\u5317\u4eac-\u5170\u5dde7\u665a9\u5929\u6781\u81f4\u81ea\u7531\u884c",
		"content": "\u5317\u4eac\u5f80\u8fd4\u5e03\u9c81\u585e\u5c14+1\u665a\u9152\u5e97\uff0c\u6781\u81f4\u897f\u6b27\u81ea\u7531\u7684\u884c\u8d70",
		"aprice": "3399",
		"bprice": "6599",
		"imgurl": "../image/t2.jpg"
	}
}, {
	"model": "news.news",
	"pk": 2,
	"fields": {
		"newsname": "4\u670822\u65e5 | \u5317\u4eac\u51fa\u53d1",
		"title": " \u5317\u4eac-\u4e0a\u6d777\u65e5\u6e38",
		"content": "\u8d85\u503c\u6e38\u8f6e\uff0c\u6c57\u84b8\u5e55\uff0c\u4e50\u5929\u901a\u7968\uff0c\u5965\u7279\u83b1\u65af",
		"aprice": "1671",
		"bprice": "3380",
		"imgurl": "../image/t3.jpg"
	}
}, {
	"model": "news.news",
	"pk": 3,
	"fields": {
		"newsname": "4\u670823\u65e5 | \u5317\u4eac\u51fa\u53d1",
		"title": "\u5317\u4eac-\u897f\u85cf4\u65e5\u5355\u673a\u7968",
		"content": " \u5355\u673a\u7968\uff0c\u5317\u4eac\u5f80\u8fd4\uff0c\u7279\u4ef7\u673a\u7968\u542b\u7a0e\uff0c\u9650\u91cf\u4f9b\u5e94",
		"aprice": "2099",
		"bprice": "3260",
		"imgurl": "../image/t3.jpg"
	}
}, {
	"model": "news.news",
	"pk": 4,
	"fields": {
		"newsname": "4\u670824\u65e5 | \u5317\u4eac\u51fa\u53d1",
		"title": " \u5317\u4eac-\u82cf\u6885\u968f\u5fc35\u665a6\u65e5\u81ea\u52a9\u65c5\u6e38",
		"content": " \u8d60\u9001\u5883\u5916\u65c5\u6e38\u610f\u5916\u9669\uff0c2\u4eba\u5373\u53ef\u6210\u56e2",
		"aprice": "4199",
		"bprice": "5699",
		"imgurl": "../image/t4.jpg"
	}
}, {
	"model": "news.news",
	"pk": 5,
	"fields": {
		"newsname": "10\u670825\u65e5 | \u5317\u4eac\u51fa\u53d1",
		"title": "\u4fc4\u7f57\u65af-\u8d1d\u52a0\u5c14\u6e56\u4f11\u95f24\u65e5\u6e38",
		"content": "\u4e16\u754c\u6700\u6df1\u6e56\uff0c\u4f11\u95f2\u80dc\u5730\uff0c\u53ea\u89813999",
		"aprice": "3999",
		"bprice": "5699",
		"imgurl": "../image/t5.jpg"
	}
}, {
	"model": "news.news",
	"pk": 6,
	"fields": {
		"newsname": "10\u670826\u65e5 | \u5317\u4eac\u51fa\u53d1",
		"title": "\u83ab\u65af\u79d1-\u5723\u5f7c\u5f97\u58218\u65e5\u6e38",
		"content": " \u6d77\u822a\u5f80\u8fd4\uff0c\u514b\u91cc\u59c6\u6797\u5bab\uff0c\u5361\u6d1b\u660e\u65af\u514b\u5e84\u56ed",
		"aprice": "4399",
		"bprice": "7599",
		"imgurl": "../image/t6.jpg"
	}
}, {
	"model": "news.news",
	"pk": 7,
	"fields": {
		"newsname": "10\u670827\u65e5 | \u5317\u4eac\u51fa\u53d1",
		"title": "\u5317\u4eac-\u53f0\u6e7e\u9ad8\u96c4-\u53f0\u4e1c\u82b1\u83b2\u53cc\u98de7\u665a8\u65e5\u6e38",
		"content": "\u62a5\u540d\u9001\u97e9\u56fd 101\u767b\u9876 \u5317\u4eac\u8d77\u98de",
		"aprice": "3399",
		"bprice": "4599",
		"imgurl": "../image/t7.jpg"
	}
}, {
	"model": "news.news",
	"pk": 8,
	"fields": {
		"newsname": "10\u670828\u65e5 | \u5317\u4eac\u51fa\u53d1",
		"title": "\u4e1c\u4eac-\u6a2a\u6ee8-\u4eac\u90fd-\u5bcc\u58eb\u5c716\u65e5\u6e38",
		"content": "\u9014\u725b\u72ec\u5bb6\u5305\u56e2\uff0cEY\u5168\u7f51\u6700\u4f4e\u4ef7",
		"aprice": "0",
		"bprice": "6599",
		"imgurl": "../image/t8.jpg"
	}
}, {
	"model": "news.news",
	"pk": 9,
	"fields": {
		"newsname": "10\u670828\u65e5 | \u5317\u4eac\u51fa\u53d1",
		"title": "\u4e1c\u4eac\u94f6\u5ea75\u65e5\u81ea\u52a9\u6e38",
		"content": "\u4e1c\u4eac\u8840\u62fc\uff0c\u8d2d\u7269\u6e38\u73a9\u7684\u4e0d\u4e8c\u9009\u62e9",
		"aprice": "3560",
		"bprice": "4530",
		"imgurl": "../image/t9.jpg"
	}
}]

html页面的渲染代码如下

	<div id="test"></div>
    <script id="testTemplate" type="text/x-dot-template">
    {{ for(var i=0; i < it.length; i++) { }}
            <dd class="img" οnclick="toDetail()" tapmode="">
              <img src="{{=it[i].fields.imgurl}}">
              <div class="lable">{{= it[i].fields.newsname}}</div>
          </dd>
          <dd class="detail">
            {{= it[i].fields.title}}<br>
            {{= it[i].fields.content}}
          </dd>
          <dd class="price">
              <span class="newPrice">￥{{= it[i].fields.aprice}}</span>
              <del class="oldPrice">￥{{= it[i].fields.bprice}}</del>
          </dd>
			{{ } }}
    </script>

页面效果如下

---