2013-08-05 2 views
7

Sto creando una diapositiva - quindi non c'è 3 immagini ognuno div in questo modociascuno con indice e modulo di brace e manubrio

<div> 
    <img /> 
    <img /> 
    <img /> 
</div> 

</div> 
    <img /> 
    <img /> 
    <img /> 
</div> 

Nessuno di codice in giro per internet funziona perfettamente -

https://github.com/johanpoirier/resthub-backbone-stack/commit/8a318477d56c370d2a0af4da6eae9999c7bb29da

http://jaketrent.com/post/every-nth-item-in-handlebars-loop/

http://rockycode.com/blog/handlebars-loop-index/

http://www.arlocarreon.com/blog/javascript/handlebars-js-everyother-helper/

e sì comprese le risposte qui in overflow dello stack.

Qualcuno può fornire un codice che funzioni perfettamente in questo periodo corrente (versione di Ember/Handlebar)?

mi hanno una serie di modelli in modo mi piacerebbe fare qualcosa di simile

{{#each model}} 
    {{if index % 3 == 0}} 
    {{/if}} 
{{/each}} 
+0

Hai guardato http : //stackoverflow.com/questions/8853396/logical-operator-in-a-handlebars-js-if-conditional/9405113#9405113 ci sono alcuni esempi per scrivere gli helper delle condizioni personalizzate. Inoltre * l'indice * è disponibile tramite '@ index' – colymba

risposta

13

Mi è stato trovare che index o @index non funzionano all'interno del modello, ma è possibile accedervi dall'interno di un aiutante.

Ho fatto un esempio che illustra questo qui:

http://jsbin.com/egoyay/1/edit

Edit: aggiunta di codice per rispondere, dimostrando {{else}} blocco

Manubrio helper (per non usare Ember):

Handlebars.registerHelper('ifIsNthItem', function(options) { 
    var index = options.data.index + 1, 
     nth = options.hash.nth; 

    if (index % nth === 0) 
    return options.fn(this); 
    else 
    return options.inverse(this); 
}); 

Utilizzo:

<ol> 
{{#each model}} 
    <li> 
    {{#ifIsNthItem nth=3}} 
     Index is a multiple of 3 
    {{else}} 
     Index is NOT a multiple of 3 
    {{/ifIsNthItem}} 
    </li> 
{{/each}} 
</ol> 
+0

wow la tua roba funziona perfettamente. Grazie mille! – David

+1

Bello. Ho trovato che 'options.data.view.contentIndex' non era disponibile, ma l'accesso all'indice tramite' options.data.index' funzionava. – kontur

+0

Questo ha funzionato alla grande. Come faresti la stessa cosa, ma con la possibilità di aggiungere un altro nel mix? '{{ifIsNthItem nth = 3}} fai questo {{else}} fai qualcos'altro {{/ ifIsNthItem}}' – carter

2

Se si specifica itemViewClass in each aiutante, allora sarà creare una vista per ogni elemento e impostare la proprietà ContentIndex:

{{#each model itemViewClass="Ember.View"}} 
    {{view.contentIndex}} 
{{/each}} 

testato in Ember v1.1.0

+1

Senza specificare itemViewClass, possiamo usare _view.contentIndex. Ma questo non funziona all'interno di un helper #if all'interno di #each. – Champ