javascript - 限制列表表达式中显示的列表项数量

Question

我需要在两个 div 中显示一个列表数组，前半部分在第一个 DIV 中，后半部分在第二个 DIV 中列表。请注意，我不想将列表数组拼接成两部分并在两个列表中显示。

这是我的模板，例如

<!-- First half number of items should be displayed in firstHalf div -->
<div id="firstHalf">
   {{#each names:i}}
      {{firstName}} {{lastName}}
   {{/each}}
</div>
<!-- Second half number of items should be displayed in secondHalf div -->
<div id="secondHalf">
   {{#each names:i}}
      {{firstName}} {{lastName}}
   {{/each}}
</div>

例如，如果我有如下数据

var data = [ {
    firstName : "Joe", lastName: "Armstrong"
}, {
    firstName : "Jose", lastName: "Valim"
}];

它需要像下面这样渲染

<div id="firstHalf">
   Joe Armstrong
</div>
<div id="firstHalf">
   Jose Valim
</div>

请给我进一步的建议。

Answer 1

另一种有效的方法是通过索引引用间接引用列表成员。在 this example我们正在生成一系列索引，然后引用list[this]:

<!-- First half number of items should be displayed in firstHalf div -->
<div id="firstHalf">
   {{#each range(0,names.length/2) }}
      {{names[this].firstName}} {{names[this].lastName}}
   {{/each}}
</div>

<!-- Second half number of items should be displayed in secondHalf div -->
<div id="secondHalf">
   {{#each range(names.length/2,names.length) }}
      {{names[this].firstName}} {{names[this].lastName}}
   {{/each}}
</div>

range() 函数如下所示:

function ( start, end ) {
    var arr = [];
    for ( i = Math.floor(start); i < Math.floor(end); i += 1 ) {
        arr.push( i );
    }
    return arr;
}

尽管pseudosavant有一个非常好的解决方案，但我提到这一点是因为间接引用元素是在执行诸如与表格数据进行双向绑定(bind)之类的操作时一个有用的技巧。