使用數組來填充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