6

以下の例では、プレーヤーの名前のリストを生成します。ここで、プレーヤーはMongoDBデータベースからのデータ セットです。

<template name="players">
  {{#each topScorers}}
    <div>{{name}}</div>
  {{/each}}
</template>

しかし、4人並べて表示したいのですが、4人印刷した後、1列ずつ分けて<hr />続けていきたいです。例えば、

<template name="players">
  {{#each topScorers}}
    <div style="float:left;">{{name}}</div>
    {{if index%4==0}}
      <hr style="clear:both;" />
    {{/if}
  {{/each}}
</template>

コレクションを繰り返しながら、どうすればそのようなことができますか?

4

2 に答える 2

7

コレクションの反応性を維持することに沿った別の解決策は、マップ カーソル関数でテンプレート ヘルパーを使用することです。

コレクションで each を使用するときにインデックスを返す方法を示す例を次に示します。

index.html:

<template name="print_collection_indices">
  {{#each items}}
    index: {{ this.index }}
  {{/each}}
</template>

index.js:

Items = new Meteor.Collection('items');

Template.print_collection_indices.items = function() {
  var items = Items.find().map(function(doc, index, cursor) {
    var i = _.extend(doc, {index: index});
    return i;
  });
  return items;
};
于 2013-12-28T08:14:10.570 に答える
6

現在これを行う簡単な方法はありません。最新バージョンのハンドルバーは@indexフィールドをサポートしていますが (これはあなたが望むことを行います)、流星のバージョンにはまだ実装されていません - https://github.com/meteor/meteor/issues/ 489 .

確かに、独自の{{#each_with_index}}ヘルパーを実装できます。次のようになります。

Handlebars.registerHelper('each_with_index', function(items, options) {
  var out = '';
  for(var i=0, l=items.length; i<l; i++) {
    var key = 'Branch-' + i;
    out = out + Spark.labelBranch(key,function(){ 
      options.fn({data: items[i], index: i});
    });
  }

  return out;
});

{{#each}}これの欠点は、単一のアイテムが変更されたときにリスト全体を反応的に再レン​​ダリングしない流星のヘルパーの良さを失うことです。

編集： https ://github.com/meteor/meteor/issues/281#issuecomment-13162687へのポインタをありがとう@zorlak

于 2012-12-14T00:18:16.247 に答える