1

I am using HandlebarsJS and JQuery to display content on a page using the #each helper. What I am trying to achieve is to show few (5) at a time. The data is a JSON file.

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

I tried using a $each loop and setTimeout() with a offset variable but that all happens after the page is rendered and slows the page down and its not quite working for me.

Is there a way of doing this with a Helper function in handlebars?

I found this link here but was not very helpful

Any help or suggestions much appreciated.

Zinox
  • 519
  • 9
  • 24
  • couple of ways to do this, let me ask if you show the first 5 when and how do you show the next 5? you could create a function that returns an array of objects and limits the length to 5, when the user wants to see the next 5 you call this function to get the next 5 and bind it to your html. This is called pagination. You could also use the index and if else logic: if index < 5 show else hide user clicks button for next 5 it just changes the if logic to be if index > 5 you get the point. – floor Feb 23 '18 at 13:38
  • @floor in want to basically show the data 5 at a time using a setTimeout function so that it refreshes the entire page every 10 secs but cycles through the data withing that time. If that makes sense. – Zinox Feb 23 '18 at 13:44
  • I dont think refreshing the page is the best idea but if thats your plan you could put a parameter in the url for the start and end index for your data array. Read that in and create a sub array from your model data with the range from the url. https://stackoverflow.com/questions/979975/how-to-get-the-value-from-the-get-parameters – floor Feb 23 '18 at 13:59

1 Answers1

0

Solved. I'm sure not the best solution but it seems to work 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/Handlebars

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);
}
Zinox
  • 519
  • 9
  • 24