web-dev-qa-db-ja.com

emberjsの#eachでインデックスにアクセスする

添付のコードをご覧ください

http://jsbin.com/atuBaXE/2/

{{@index}}を使用してインデックスにアクセスしようとしていますが、コンパイルされていないようです。ハンドルバーはそれをサポートすると思います

{{#each item in model}}
  {{@index}} 
  {{item}}
{{/each}}

うまくいきません。{{@ index}}がサポートされているかどうかわかりません

使っています

  • Ember.VERSION：1.0.0
  • Handlebars.VERSION：1.0.0
javascriptember.jshandlebars.js
43
Mohammad Abu Musa

[〜＃〜] update [〜＃〜]

this PR であるため、新しいヘルパー構文を使用して、各ヘルパーをインデックスで使用できるようになりました。これはカナリアで利用可能であり、うまくいけばember 1.11でデフォルトで有効になります

{{#each model as |item index|}}
  <li>
    Index: {{index}} Content: {{item}}
  </li>
{{/each}}

ライブサンプル

古いバージョンの場合

{{_view.contentIndex}}を使用できます。

{{#each item in model}}
  <li>
    Index: {{_view.contentIndex}} Content: {{item}}
  </li>
{{/each}}

ライブサンプル

128
Marcio Junior

いいえ、EmberのバージョンのHandlebarsには存在しません。1つの方法は、アイテムコントローラーを使用し、最初または最後などのプロパティを追加することです。

App.IndexController = Ember.ArrayController.extend({
  itemController: 'itemer'
});

App.ItemerController = Ember.ObjectController.extend({
  needs:['index'],
  isFirst: function(){
    return this.get('color') === this.get('controllers.index.firstObject.color');
  }.property('controllers.index.firstObject')
});

http://emberjs.jsbin.com/aPewofu/1/edit

4
Kingpin2k

特に、@ index構文に関しては、2014年10月現在：

Emberは、@ index（または他の@dataタイププロパティ）をサポートしません。

https://github.com/toranb/ember-template-compiler/issues/16#issuecomment-38823756

3
Feckmore

私は@ kingpin2kからの答えが好きです-Ember方法はモデルを飾るためにコントローラを使用することであり、このコンテキストでは、その場所を表すインデックスプロパティを追加することによってそれを飾るコレクション。

手元のタスク用に装飾されたインスタンスコントローラーの個別のコレクションを構築することで、少し異なります。

App.PostsIndexController = Ember.ArrayController.extend({
  indexedContent: function() {
    get('content').map(function(item, index) {
      App.PostsItemController.create({
        content: item,
        index: index
      });
    });
  }.property('content')
});

App.PostsItemController = Ember.ObjectController.extend({
  index: null
});
2
aceofspades

ビューでインデックスを1インデックスの値として表示するだけの場合は、 CSS Counters を指定することもできます。 サポート IE 8。

1
typeoneerror