Indice posizionale nell'iterazione delle raccolte Ember.js

Question

C'è un modo per ottenere l'indice posizionale durante l'iterazione in ember.js?

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

Sto cercando un modo per avere qualcosa del tipo:

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

Aggiornamento:

Secondo il commento di @ebryn, il codice seguente funziona senza utilizzare una vista nidificata per ciascun elemento:

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

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

Sebbene per avere qualcosa come adjustmentIndex, sarebbe necessaria una vista nidificata.

Answer 1

È una vecchia domanda ma riceve ancora molti successi.Nella versione attuale di Ember.JS è possibile utilizzare _view.contentIndex per visualizzare l'indice corrente all'interno del ciclo.

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

Se è necessario un indice modificato (ad esempio a partire da 1), esiste la possibilità di creare un helper riutilizzabile increment

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

quindi lo useresti nel modo seguente

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

Aggiornamento

A partire da Ember 1.11 puoi farlo anche tu

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

Answer 2

Nell'RC6 CollectionView fornisce contentIndex proprietà per ogni vista renderizzata della raccolta. Each usi dell'aiutante CollectionView nella sua implementazione in modo da poter accedere all'indice in questo modo:

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

Answer 3

In realtà sì, puoi ottenere la posizione dell'indice corrente utilizzando l'helper {{each}}.Devi creare una vista per ogni elemento in un elenco e quindi utilizzare {{_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()
});

Vedere questo jsFiddle per un esempio funzionante.

Answer 4

A partire da Ember 9.8 e versioni precedenti alla 1.0 puoi racchiudere il "contentIndex" in una vista per arrivare al genitore virtuale (il {{#each}}).Se non aggiungi la vista, il tuo contesto finirà per essere il modello principale, un elemento nel tuo elenco o qualunque cosa tu abbia impostato manualmente con il tuo {{#with}}.Non è impossibile arrivare al {{#each}} dal lato JS, ma è molto più doloroso sfogliare le opinioni di quei bambini.

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

Nel caso in cui volessi un violinista.

DIMOSTRAZIONE

Nota:Puoi creare una vista e fare a this.get("_parentView.contentIndex") per accedere all'indice se si desidera modificare del tutto il numero.

Answer 5

Questa non è attualmente una funzionalità di Handlebars o Ember.Handlebars.Abbiamo contentIndex disponibile all'interno #collection/Ember.CollectionView.Penso che sia utile supportarlo #each pure.Si prega di inviare un problema al repository GitHub: https://github.com/emberjs/ember.js/issues

Answer 6

A partire da Ember 1.11.0, index è un parametro facoltativo in each blocchi:

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

Answer 7

Ho modificato leggermente la soluzione ud3323 utilizzando collection.Controlla qui: 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

Penso che probabilmente anche tu potresti fare qualcosa del genere

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