0

list array前半を最初の DIV に、後半のリストを 2 番目の DIVに表示する必要があります。リスト配列を 2 つの部分につなぎ合わせて 2 つのリストに表示したくないことに注意してください。

たとえば、ここに私が持っているテンプレートがあります

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

もう 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

Mustache はロジックが少ないため、2 つの配列を指定しないと、エントリを 2 つの div に分割できません。

テンプレートがレンダリングされる{{key}}と、リスト内の各要素が同じ値に置き換えられます。

これには、おそらくハンドルバーを使用できます。

于 2014-07-23T21:44:29.720 に答える