2013-08-05 6 views
7

Ich bin eine Folie zu schaffen - so gibt es 3 Bilder jeden div wie sojeweils mit dem Index und Modulo in Ember und Lenker

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

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

Keine des Code um das Internet funktioniert einwandfrei -

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/

und ja einschließlich der Antworten hier im Stapelüberlauf.

Kann jemand einen Code zur Verfügung stellen, der in dieser aktuellen Periode (Version von Ember/Handlebar) perfekt funktioniert?

Ich habe eine Reihe von Modellen, so dass ich etwas tun möchte, wie

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

Sie unter http ausgesehen haben : //stackoverflow.com/questions/8853396/logical-operator-in-a-handlebars-js-if-conditional/9405113#9405113 Es gibt einige Beispiele, um benutzerdefinierte Bedingungen Helfer zu schreiben. Auch * index * ist verfügbar über '@ index' – colymba

Antwort

13

ich zu finden sind, dass index oder @index funktionieren nicht aus der Vorlage, aber man kann es von innerhalb einer Helfer.

Ich habe hier ein Beispiel gemacht, dass dies zeigt:

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

Edit: Code Hinzufügen zu beantworten, was zeigt, {{else}} Block

Lenker Helfer (für Nicht-Ember verwenden):

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

Verwendung:

<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 deine Sachen funktionieren einwandfrei. Ich danke dir sehr! – David

+1

Schön. Ich fand, dass 'options.data.view.contentIndex' nicht verfügbar war, aber der Zugriff auf den Index über 'options.data.index' funktionierte. – kontur

+0

Das hat super funktioniert. Wie würdest du das Gleiche machen, aber mit der Fähigkeit, ein anderes in den Mix aufzunehmen? '{{ifIsNthItem nth = 3}} tue dies {{else}} tue etwas anderes {{/ ifIsNthItem}}' – carter

2

Wenn Sie itemViewClass in each Helfer angeben, dann wird es eine Ansicht für jedes Element erstellen und Content Eigenschaft:

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

in Ember v1.1.0 getestet

+1

Ohne Angabe der itemViewClass können wir _view.contentIndex verwenden. Aber das funktioniert nicht innerhalb eines #if-Helfers innerhalb der #Eache. – Champ