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

Mustache的逻辑较少，如果不提供两个数组，则不能将条目拆分为两个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

另一种有效的方法是通过索引引用间接引用列表成员。在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;
}

即使假设有一个非常好的解决方案，我也提到这一点，因为间接引用元素是一个很有用的技巧，可以在处理表格数据时进行双向绑定。

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

3 个答案:

模板有两个部分：每半部分一个