最好的方法是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>
页面效果如下