Ember.js コレクション反復における位置インデックス

StackOverflow https://stackoverflow.com/questions/8870785

  •  28-10-2019
  •  | 
  •  

質問

ember.jsでの反復中に位置インデックスを取得する方法はありますか?

{{#each itemsArray}}
     {{name}}
{{/each}}

次のような方法を探しています:

{{#each itemsArray}}
    {{name}} - {{index}}th place.
{{/each}}

アップデート：

@ebryn によるコメントによると、以下のコードは各項目にネストされたビューを使用しなくても機能します。

<script type="text/x-handlebars">    
    {{#collection contentBinding="App.peopleController"}}
        Index {{contentIndex}}: {{content.name}} <br />
    {{/collection}}
</script>​

http://jsfiddle.net/WSwna/14/

ただし、adjustedIndex のようなものを使用するには、ネストされたビューが必要になります。

役に立ちましたか？

解決

古い質問ですが、今でも多くのヒットがあります。Ember.JS の現在のバージョンでは、次を使用できます。 _view.contentIndex ループ内の現在のインデックスを表示します。

{{#each}}
    Index: {{_view.contentIndex}}
{{/each}}

調整されたインデックス (たとえば 1 から開始) が必要な場合は、再利用可能なヘルパーを作成する可能性があります。 increment

Ember.Handlebars.registerBoundHelper('increment', function(integer) {
    return integer + 1;
});

次に、次のように使用します

{{#each}}
    Index: {{increment _view.contentIndex}}
{{/each}}

アップデート

Ember 1.11 以降では、次のこともできます

{{#each people as |person index|}}
   Index: {{increment index}}
{{/each}}

他のヒント

RC6内 CollectionView 提供します contentIndex コレクションのレンダリングされたビューごとにプロパティを設定します。 Each ヘルパーが使用する CollectionView その実装では、uou が次の方法でインデックスにアクセスできるようにします。

{{#each itemsArray}}
    {{_view.contentIndex}}
{{/each}}

実際、はい、{{each}} ヘルパーを使用して現在のインデックスの位置を取得できます。リスト内のすべての項目に対してビューを作成してから使用する必要があります。 {{_parentView.contentIndex}}. 

<script type="text/x-handlebars">
{{#each App.peopleController}}
  {{#view App.PersonView contentBinding="this"}}
    Index {{_parentView.contentIndex}}: {{content.name}} {{adjustedIndex}} <br />
  {{/view}}
{{/each}}
</script>


App = Ember.Application.create();

App.peopleController = Ember.ArrayController.create({
  content: [ { name: 'Roy' }, { name: 'Mike' }, { name: 'Lucy' } ]
});

App.PersonView = Ember.View.extend(Ember.Metamorph, {
  content: null,
  // Just to show you can get the current index here too...
  adjustedIndex: function() {
    return this.getPath('_parentView.contentIndex') + 1;
  }.property()
});

見る この jsFiddle 実際の例として。

Ember 9.8 および 1.0 以前では、仮想親 ({{#each}}) を取得するために、「contentIndex」をビューでラップできます。ビューを追加しない場合、コンテキストはメイン テンプレート、リスト内の項目、またはビューで手動で設定したもののいずれかになります。 {{#with}}. 。に到達することは不可能ではありません {{#each}} JS 側から見ると、これらの子ビューをめくるのははるかに面倒です。

{{#each App.peopleController}}
    {{#view}}
        Index {{view._parentView.contentIndex}}: {{name}} <br />
    {{/view}}
{{/each}}

...OR...

{{#each people in App.peopleController}}
    {{#view}}
        Index {{view._parentView.contentIndex}}: {{people.name}} <br />
    {{/view}}
{{/each}}

フィドラーが必要な場合に備えて。

デモ

注記：ビューを作成して次のことを行うことができます this.get("_parentView.contentIndex") 数値を変更したい場合は、インデックスを取得します。

これは現在ハンドルバーの機能ではありません。 Ember.Handlebars. 。我々は持っています contentIndex 中で利用可能 #collection/Ember.CollectionView. 。をサポートすると便利だと思います #each あまりにも。GitHub リポジトリで問題を報告してください。 https://github.com/emberjs/ember.js/issues

Ember 1.11.0 以降、 index はオプションのパラメータです each ブロック:

{{#each items as |item index|}}
  {{item.name}} is at index {{index}}
{{/each}}

コレクションを使用して ud3323 ソリューションを少し変更しました。ここを確認してください: http://jsfiddle.net/johngouf/WSwna/13/

<script type="text/x-handlebars">    
{{#collection contentBinding="App.peopleController"}}
  {{#view App.PersonView contentBinding="this"}}
    Index {{_parentView.contentIndex}}: {{content.name}} {{adjustedIndex}} <br />
  {{/view}}
{{/collection}}
</script>

App = Ember.Application.create();
App.peopleController = Ember.ArrayController.create({
 content: [ { name: 'Roy' }, { name: 'Mike' }, { name: 'Lucy' } ]
});

App.PersonView = Ember.View.extend({
 content: null,
 // Just to show you can get the current index here too...
 adjustedIndex: function() {
    return this.getPath('_parentView.contentIndex') + 1;
 }.property()
});

​​

おそらくこんなこともできると思います

//add index property to all each queries
Handlebars.registerHelper('each', function(context, block) {
    var ret = "";
    for(var i=0, j=context.length; i<j; i++) {
        context[i].index = i;
        ret = ret + block(context[i]);
    }
    return ret;
});
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top