我使用#EAK帮手。我试图实现的是一次显示很少的(5(。数据是JSON文件。
样品小提琴这里
html
<div class="container">
<!-- data goes here -->
</div>
<script id="template" type="text/x-handlebars-template">
<div class="parent">
{{#each names}}
<p class="child">Name: {{name}}, Age: {{age}}. Profession: {{work}}</p>
{{/each}}
</div>
</script>
JS
let model = {
names: [
{name: "Michael", age: 22, work: "apple planter"},
{name: "Smith", age: 35, work: "baseball player"},
{name: "Sally", age: 33, work: "courier"},
{name: "Lara", age: 87, work: "drummer"},
{name: "Simon", age: 25, work: "english teacher"},
{name: "Tucker", age: 27, work: "football player"},
{name: "Angel", age: 87, work: "golf instructor"},
{name: "Venom", age: 44, work: "hotel manager"},
{name: "Clark", age: 82, work: "instructor"},
{name: "Steven", age: 11, work: "junior programmer"},
{name: "Sandy", age: 45, work: "kite designer"},
]
}
let template = Handlebars.compile($("#template").html());
$(".container").html(template(model));
我尝试使用带有偏移变量的每个$ loop和settimeout((,但所有这些都发生在页面渲染并放慢页面向下放慢后,它对我不太有用。
是否有一种方法在车把中使用辅助功能?
我在这里找到了此链接,但不是很有帮助
任何帮助或建议都非常感谢。
已解决。我敢肯定不是最好的解决方案,但它似乎有效小提琴
html
<div class="container">
<!-- data goes here -->
</div>
<script id="template" type="text/x-handlebars-template">
<div class="parent">
{{#each names}}
<p class="child">Name: {{name}}, Age: {{age}}. Profession: {{work}}</p>
{{/each}}
</div>
</script>
JS/车把
let model = {
names: [
{name: "Michael", age: 22, work: "apple planter"},
{name: "Smith", age: 35, work: "baseball player"},
{name: "Sally", age: 33, work: "courier"},
{name: "Lara", age: 87, work: "drummer"},
{name: "Simon", age: 25, work: "english teacher"},
{name: "Tucker", age: 27, work: "football player"},
{name: "Angel", age: 87, work: "golf instructor"},
{name: "Venom", age: 44, work: "hotel manager"},
{name: "Clark", age: 82, work: "instructor"},
{name: "Steven", age: 11, work: "junior programmer"},
{name: "Sandy", age: 45, work: "kite designer"},
]
}
let template = Handlebars.compile($("#template").html());
var mod = {
names: []
}
$(document).ready(function(){
AddToDom();
});
function AddToDom(){
mod.names = model.names.splice(0, 5);
if(mod.names.length == 0){
location.reload();
}
$(".container").html(template(mod));
setTimeout(AddToDom, 5000);
}