限制要在列表表達式中顯示的列表項的數量

Question

我需要在兩個div中顯示一個list array ，第一個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

胡須少了邏輯，如果您不提供兩個數組，則不能將條目分成兩個div。

呈現模板后，列表中的每個元素都會用相同的值替換每個出現的{{key}} 。

為此，您可能會使用把手。

Answer 2

您可以通過在模板中遍歷列表兩次並且仍然僅使用一個數組來完成此操作。 只需在每次迭代中使用條件到列表的前半部分或后半部分即可。

模板分為兩部分：每半部分

<div id="firstHalf">
    {{#each names:i}}
        {{#if i < names.length / 2}} // Conditional to only display first half of `names`
            {{firstName}} {{lastName}}
        {{/if}}
    {{/each}}
</div>
<div id="secondHalf">
    {{#each names:i}}
        {{#if i > names.length / 2}} // Conditional to only display second half of `names`
            {{firstName}} {{lastName}}
        {{/if}}
    {{/each}}
</div>

此處的代碼啟發了我們： http : //pastie.org/9415897#

Answer 3

另一種有效的方法是通過索引引用間接引用列表成員。 在此示例中，我們將生成一系列索引，然后引用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;
}

即使從偽專家那里有一個非常好的解決方案，我也要提到這一點，因為在進行諸如表格式數據的雙向綁定之類的事情時，間接引用元素是使您精疲力盡的有用技巧。