Позиционный индекс в итерации коллекции Ember.js

Ответ 1

Этот старый вопрос, но все еще получает много хитов. В текущей версии 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}}

Ответ 2

На самом деле да, вы можете получить позицию текущего индекса с помощью помощника {{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 для рабочего примера.

Ответ 3

В RC6 CollectionView обеспечивается contentIndex свойство для каждого визуализированного представления коллекции. Each helper использует CollectionView в своей реализации, поэтому вы можете получить доступ к индексу таким образом:

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

Ответ 4

Начиная с Ember 9.8 и pre-1.0 вы можете обернуть "contentIndex" с представлением, чтобы получить виртуального родителя ({{#each}}). Если вы не добавляете представление, ваш контекст становится либо основным шаблоном, либо элементом в вашем списке, либо тем, что вы вручную установили с помощью {{#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}}

В любом случае вы хотели бы скрипача.

DEMO

Примечание. Вы можете создать представление и сделать this.get("_parentView.contentIndex"), чтобы получить индекс, если вы хотите вообще изменить номер.

Ответ 5

В настоящее время это функция Handlebars или Ember.Handlebars. У нас есть contentIndex внутри #collection/Ember.CollectionView. Я думаю, что полезно поддерживать в #each тоже. Пожалуйста, укажите проблему в репозитории GitHub: https://github.com/emberjs/ember.js/issues

Ответ 6

Я думаю, что вы, вероятно, тоже могли бы сделать что-то подобное

//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;
});

Ответ 7

Я изменил бит 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()
});

Ответ 8

Как и в Ember 1.11.0, index является необязательным параметром в блоках each:

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