Question

我正在使用HandlebarsJS和JQuery使用#each在页面上显示内容帮手。我想要实现的目标是一次显示少数（5）。数据是JSON文件。

示例小提琴 here

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));

我尝试使用$ each循环和setTimeout（）以及偏移量变量，但这一切都发生在页面渲染之后并且减慢了页面速度并且它对我不起作用。

有没有办法在把手中使用辅助功能？

我发现这个link here但不是很有帮助

任何帮助或建议非常感谢。

Answer 1

解决。我确定不是最好的解决方案，但似乎有效 Fiddle

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);
}

使用Jquery和HandlebarsJS {{#each}}帮助器一次显示少数（5）

1 个答案: