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：

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

Answer 1

您需要通过使用此列表作为参数执行模板，将 list 变量传递给模板：

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

使用数组填充Handlebars模板

1 个答案: