Index de position dans l'itération des collections Ember.js

Question

Existe-t-il un moyen d'obtenir un index de position lors de l'itération dans ember.js ?

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

Je cherche un moyen d'avoir quelque chose comme :

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

Mise à jour:

Selon le commentaire de @ebryn, le code ci-dessous fonctionne sans utiliser de vue imbriquée pour chaque élément :

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

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

Bien que pour avoir quelque chose comme ajustéIndex, une vue imbriquée serait nécessaire.

Answer 1

C'est une vieille question mais elle suscite encore beaucoup de succès.Dans la version actuelle d'Ember.JS, on peut utiliser _view.contentIndex pour afficher l'index actuel à l'intérieur de la boucle.

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

Si vous avez besoin d'un index ajusté (par exemple à partir de 1), il est alors possible de créer un assistant réutilisable. increment

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

alors vous l'utiliseriez de la manière suivante

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

Mise à jour

À partir d'Ember 1.11, vous pouvez faire aussi

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

Answer 2

Dans RC6 CollectionView fournit contentIndex propriété pour chaque vue rendue de la collection. Each l'assistant utilise CollectionView dans son implémentation afin que vous puissiez accéder à l'index de cette manière :

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

Answer 3

En fait, oui, vous pouvez obtenir la position de l'index actuel en utilisant l'assistant {{each}}.Vous devez créer une vue pour chaque élément d'une liste, puis utiliser {{_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()
});

Voir ce jsFiddle pour un exemple fonctionnel.

Answer 4

Depuis Ember 9.8 et versions antérieures à 1.0, vous pouvez envelopper le "contentIndex" avec une vue afin d'accéder au parent virtuel (le {{#each}}).Si vous n'ajoutez pas la vue, votre contexte finit par être soit le modèle principal, un élément de votre liste ou tout ce que vous avez défini manuellement avec votre {{#with}}.Il n'est pas impossible d'accéder au {{#each}} du côté JS, mais c'est beaucoup plus pénible de parcourir ces vues d'enfants.

{{#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}}

Juste au cas où vous voudriez un violoniste.

DÉMO

Note:Vous pouvez créer une vue et faire un this.get("_parentView.contentIndex") pour accéder à l'index si vous souhaitez modifier le numéro.

Answer 5

Ce n'est pas actuellement une fonctionnalité de guidons ou Ember.Handlebars.Nous avons contentIndex disponible à l'intérieur #collection/Ember.CollectionView.Je pense qu'il est utile de soutenir #each aussi.Veuillez signaler un problème dans le référentiel GitHub : https://github.com/emberjs/ember.js/issues

Answer 6

Depuis Ember 1.11.0, index est un paramètre facultatif dans each blocs :

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

Answer 7

J'ai modifié un peu la solution ud3323 en utilisant la collection.Vérifier ici: 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()
});

​​

Answer 8

Je pense que tu pourrais probablement faire quelque chose comme ça aussi

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