Using an array to populate Handlebars template

Question

I have a javascript function that takes the total number of items in a list and then divides them based on how many are allowed on a page. I use an array that I populate with a loop based on that number to create my page numbers. This is all for a handlebars template.

My problem is, it doesn't seem like the array is going through the template, but just being put straight into my div, because when inspect the element, there is no anchor tag around either of the numbers

The function:

function GetPages() {

    var TotalItems = 10;
    var NumOnPage = 9;
    var NumPages = Math.ceil(TotalItems / NumOnPage);
    console.log(NumPages);
    var list = [];
    for (var i = 1; i <= NumPages; i++) {
        list.push(i);
    }
    var source = $("#HB-PageTemplate").html();
    var template = Handlebars.compile(source);
    var html = (list);
    $('.Pager').append(html);
}

The Template:

<script id="HB-PageTemplate" type="text/x-handlebars-template">
    {{#each list}}
        <div><a class="pagelink">{{this}}</a></div>
    {{/each}}
</script>

The div:

<div class="Pager"></div>

Andriy · Accepted Answer · 2016-12-05 21:35:05Z

1

you need to pass list variable to the template by executing template with this list as argument:

function GetPages() {

  var TotalItems = 10;
  var NumOnPage = 9;
  var NumPages = Math.ceil(TotalItems / NumOnPage);
  console.log(NumPages);
  // this will create a range array from 1 to NumPages
  var list = Array.apply(null, Array(NumPages)).map((v, k) => k + 1);

  var source = $("#HB-PageTemplate").html();
  var template = Handlebars.compile(source);

  $('.Pager').html(template({list: list}));
}

plunker: http://plnkr.co/edit/be84uDn8ycBbHn2Bp7FV?p=preview

answered Dec 5, 2016 at 21:35

Andriy

15.5k4 gold badges49 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joe W Over a year ago

This makes so much sense, and it works wonderfully. Thank you!

Collectives™ on Stack Overflow

Using an array to populate Handlebars template

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related