什么是重复渲染灰尘模板的最佳方法,同时让它在数据文件中提前引用,而不是每次从头开始重复。例如:
假设我有一个名为数据的变量中存储为JSON的100多人的列表:
{
"people": [
{
"name": "Jerry",
"age": "17"
},
{
"name": "Darcy",
"age": "19"
},
{
"name": "Jacob",
"age": "25"
},
... and so on for 100 or so people
]
}
我有这个 template.tl 文件导出一行三个名字/年龄:
<div class="row">
<div>{name} - {age}</div>
<div>{name} - {age}</div>
<div>{name} - {age}</div>
</div>
我预先编译为 template.js :
(function(){dust.register("template.tl",body_0);function body_0(chk,ctx){return chk.write("<div class=\"row\"><div>").reference(ctx.get(["name"], false),ctx,"h").write(" - ").reference(ctx.get(["age"], false),ctx,"h").write("</div><div>").reference(ctx.get(["name"], false),ctx,"h").write(" - ").reference(ctx.get(["age"], false),ctx,"h").write("</div><div>").reference(ctx.get(["name"], false),ctx,"h").write(" - ").reference(ctx.get(["age"], false),ctx,"h").write("</div></div>");}return body_0;})();
然后我有一个 index.html 文件,如下所示:
<html>
<head>
...
</head>
<body>
<div id="people"></div>
<button id="load-more" type="button">Load More</button>
</body>
<script src="js/dust-core.min.js"></script>
<script src="js/template.js"></script>
</html>
最好的方法是每次点击按钮时,<div id="people"></div>
内会附加一行三个人,后续每次点击都会加载下三个/测试结束数据数组(可以假设根据我的需要,人数总是三的倍数。)
答案 0 :(得分:1)
<div class="row">
{#.}
<div>{.name} - {.age}</div>
{/.}
</div>
更改模板有两个好处:
people
个对象,而不仅仅是3个。$('#load-more').on('click', function(){
var next3 = data.people.splice(0, 3);
if(next3.length == 0){
return; // Array is empty
}
dust.render('template.tl', next3, function(err, str){
if(str){
$('#people').append(str);
}
});
});
最重要的部分是data.people.splice(0, 3)
,这会从数组中删除3个元素并返回它们 - 请参阅Array.prototype.splice()。
其余代码只是JQuery,用于添加事件侦听器并插入呈现的模板。