Позиционный индекс в итерации коллекции Ember.js
Есть ли способ получить позиционный индекс во время итерации в ember.js?
{{#each itemsArray}} {{name}} {{/each}} Я ищу способ получить что-то вроде:
{{#each itemsArray}} {{name}} - {{index}}th place. {{/each}}
Обновить:
В соответствии с комментарием @ebryn приведенный ниже код работает без использования вложенного представления для каждого элемента:
{{#collection contentBinding="App.peopleController"}} Index {{contentIndex}}: {{content.name}}
{{/collection}}
http://jsfiddle.net/WSwna/14/
Хотя иметь что-то вроде adjustIndex, требуется nested представление.
Это старый вопрос, но до сих пор много хитов. В текущей версии 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 в своей реализации, поэтому вы можете получить доступ к индексу таким образом:
{{#each itemsArray}} {{_view.contentIndex}} {{/each}}
Фактически да, вы можете получить позицию текущего индекса с помощью помощника {{each}}. Вы должны создать представление для каждого элемента в списке, а затем использовать {{_parentView.contentIndex}} .
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 и pre-1.0 вы можете обернуть «contentIndex» представлением, чтобы получить виртуального родителя ({{#each}}). Если вы не добавляете представление, ваш контекст становится либо основным шаблоном, либо элементом в вашем списке, либо тем, что вы вручную установили с помощью {{#with}} . Невозможно попасть на {{#each}} со стороны JS, но это гораздо больший боль, перелистывающий эти дочерние представления.
{{#each App.peopleController}} {{#view}} Index {{view._parentView.contentIndex}}: {{name}}
{{/view}} {{/each}} ...OR... {{#each people in App.peopleController}} {{#view}} Index {{view._parentView.contentIndex}}: {{people.name}}
{{/view}} {{/each}}
В любом случае вы хотели бы скрипача.
DEMO
Примечание. Вы можете создать представление и сделать this.get("_parentView.contentIndex") чтобы получить индекс, если вы хотите вообще изменить номер.
В настоящее время это не особенность Handlebars или Ember.Handlebars . У нас есть contentIndex ansible внутри #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/
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