0

我需要list array在两个 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>

请给我建议以进一步进行。

4

3 回答 3

1

Mustache 逻辑较少，如果不提供两个数组，则无法将条目拆分为两个 div。

当模板被渲染时{{key}}，对于列表中的每个元素，每次出现都被替换为相同的值。

为此，您可能可以使用车把。

于 2014-07-23T21:44:29.720 回答
1

另一种有效的方法是通过索引引用间接引用列表成员。在此示例中，我们生成一系列索引，然后引用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 提供了一个非常好的解决方案，但我之所以提到这一点，是因为间接引用元素是一个有用的技巧，可以在执行诸如与表格数据进行双向绑定之类的事情时袖手旁观。

于 2014-07-26T02:18:00.440 回答
1

您可能可以通过在模板中迭代列表两次并且仍然只使用一个数组来做到这一点。只需在每次迭代中对列表的前半部分或后半部分使用条件。

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

<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#

于 2014-07-23T21:53:44.100 回答