参考地址：http://www.zhangxinxu.com/wordpress/2012/09/javascript-html-json-template/
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>js模板</title>
</head>
<body>
<!--一般而言，HTML模板都是放在<textarea>标签中的，据说这样只会有一次的DOM渲染；且HTML的换行什么的可以完整保留。<textarea>标签有个克星——就是其自身，<textarea>标签无法嵌套<textarea>标签；因此，含有文本域的HTML片段不能直接放在<textarea>元素中作为模板。-->
<!--HTML模板-->
<textarea style="display:none;">
<li>
<a href="javascript:" data-id="$couponid$">
<img src="$imgsrc$" width="240" height="180" />
<p>$traffic$</p>
<p>$buynum$人购买</p>
<div>
<div><del class="g6 db">¥$cost$现金券</del>$discount$折</div>
<strong class="cr price r pr20">¥$price$</strong>
</div>
<h3>$resname$</h3>
</a>
</li>
</textarea>
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script>
//数据
var JSON = {
url: "ajax.php?author=www.zhangxinxu.com",
data: [{
couponid: "111",
imgsrc: "test1.JPG",
resname: "俏江南 仙乐斯广场",
traffic: "肇嘉浜路沿线",
buynum: 180,
cost: 100,
discount: 8.5,
price: 85
}, {
couponid: "222222",
imgsrc: "222222.jpg",
resname: "申城五月天",
traffic: "静安寺",
buynum: 0,
cost: 100,
discount: 8.0,
price: 80
}, {
couponid: "3",
imgsrc: "go-baby.jpg",
resname: "申城五月天",
traffic: "静安寺",
buynum: 0,
cost: 100,
discount: 8.0,
price: 80
}]
};
//一个固定的基于字符串原型的扩展方法
String.prototype.temp = function(obj) {
return this.replace(/\$\w+\$/gi, function(matchs) {
var returns = obj[matchs.replace(/\$/g, "")];
return (returns + "") == "undefined"? "": returns;
});
};
//动态添加DOM
var htmlList = ‘‘
// textarea中的模板HTML
, htmlTemp = $("textarea").val();
JSON.data.forEach(function(object) {
htmlList += htmlTemp.temp(object);
});
console.log(htmlList);
// htmlList就是我们需要的HTML代码啦！
$("<ul></ul>").html(htmlList).appendTo($("body"));// 插入到页面里
</script>
</body>
</html>
时间： 2024-08-29 19:59:33