使用数组来填充Handlebars模板

Question

我有一个JavaScript函数，它需要列表中的项目总数，然后根据页面上允许的数量来划分它们。我使用一个数组来填充一个基于该数字的循环来创建我的页码。这是一个句柄模板。

我的问题是，它似乎并不像阵列经历的模板，但只是被直接放进我的DIV，因为当检查元素，周围无论是数字的无锚标记

功能：

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

模板：

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

股利：

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

Answer 1

你需要作为参数与此列表执行模板变量传递列表模板：

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