Índice posicional en Ember.js colecciones de iteración

Question

Es allí una manera de obtener la posición de índice durante la iteración en ember.js?

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

Estoy buscando una manera de tener algo como:

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

Actualización:

Según el comentario de @ebryn el siguiente código funciona sin necesidad de utilizar una vista anidada para cada elemento:

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

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

A pesar de tener algo como adjustedIndex, una vista anidada sería necesario.

Answer 1

Es la vieja pregunta, pero aún así obtiene una gran cantidad de hits.En la versión actual de Ember.JS uno puede usar _view.contentIndex a la pantalla de índice actual dentro del bucle.

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

Si usted necesita un ajuste de índice (por ejemplo a partir de 1), entonces hay una posibilidad de crear reutilizables ayudante increment

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

entonces se puede utilizar de la siguiente manera

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

Actualización

Comenzando con ember 1.11 usted puede hacer así

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

Answer 2

En RC6 CollectionView proporciona contentIndex propery para cada vista procesado de colección. Each ayudante de usos CollectionView en su aplicación con el fin de uou puede acceder índice de esta manera:

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

Answer 3

En realidad sí se puede obtener la posición de la actual índice de {{cada uno de los}} ayudante.Tienes que crear una vista para cada elemento de una lista y, a continuación, utilizar {{_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()
});

Ver este jsFiddle para un ejemplo de trabajo.

Answer 4

Como Ember 9.8 y pre-1.0 usted puede ajustar el "contentIndex" con una vista en el fin de llegar a la virtual padre (el {{#cada uno de los}}).Si usted no agregar la vista, su contexto termina siendo la plantilla principal, un elemento en la lista o lo que sea que establecer manualmente con su {{#with}}.No es imposible llegar a la {{#each}} a partir de la JS lado, pero es mucho más de un dolor de voltear a través de los niño vistas.

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

Sólo en caso de que quieras un violinista.

DEMO

Nota:Puede crear una vista y hacer un this.get("_parentView.contentIndex") para obtener el índice si desea modificar el número.

Answer 5

Esto no es actualmente una característica de Manillar o Ember.Handlebars.Tenemos contentIndex disponible en el interior #collection/Ember.CollectionView.Creo que es útil para el apoyo en #each demasiado.Por favor, presenta un problema en el repositorio de GitHub: https://github.com/emberjs/ember.js/issues

Answer 6

Como Ember 1.11.0, index es un parámetro opcional en each bloques:

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

Answer 7

He modificado un poco ud3323 solución con el uso de la colección.Marque aquí: 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

Creo que probablemente podría hacer algo como esto demasiado

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