Lenker dynamische Tabellenzeile

Question

Ich bin mit Ember mit Lenkern. Ich habe eine Situation, in der ich nach 3 Iterationen eines Arrays dynamisch neue Tabellenzeilen erstellen muss.

<table> 
{{#each items as |item itemIndex|}} 
    {{#if (compare (mod itemIndex 3) '===' 0)}}<tr>{{/if}} 
     <td>{{item.id}}</td> 
    {{#if (compare (mod itemIndex 3) '===' 2)}}</tr>{{/if}} 
{{/each}} 
</table> 

Nehmen wir als Beispiel an, dass es immer einen Faktor von 3 im Array items geben wird. Wenn ich versuche, diesen Code zu speichern, erhalte ich einen Syntaxfehler, dass kein Schließungs-Tag mit dem offenen Tag übereinstimmt. Wie kann ich das und ohne den Syntaxfehler dynamisch erstellen?

Ich verwende ember CLI-Version 2.9.1.

Answer 1

Wenn Sie den Code ausführen Snippet Sie Sie wahrscheinlich ein Fehler auftritt Error while processing route: index Unclosed element tr (on line 8). Error: Unclosed element tr (on line 8). angibt Dies liegt daran, ember-template-compiler nicht weiß, wird zur Verfügung gestellt haben, ob die Wiedergabe in einer korrekten HTML Seite als Ergebnis der Rendering führen. Was ist, wenn das Array items nicht durch 3 teilbar ist? wir werden einen Fehler in der Laufzeit bekommen. Um das zu verhindern; ember-template-compiler gibt einen Fehler aus, der auf ein nicht geschlossenes tr-Tag hinweist.

Also; Was kann getan werden, um dies zu verhindern? Sie können eine berechnete Eigenschaft in Ihrem js Datei erstellen, die die Anzahl der Zeilen gibt einfach gewünscht, wie folgt:

rowCount: Ember.computed('items.length', function() { 
    return this.get('items.length')/3; 
}) 

danach können Sie einfach durch ember-composable-helpers Verwendung von range Helfer zur Verfügung gestellt machen und die folgenden in Ihrer Vorlage tun:

<table> 
    {{#each (range 0 rowCount) as |rowIndex|}} 
    <tr> 
    {{#each (range 0 3) as |columnIndex|}} 
     {{! `number` will go from 0 to 2}} 
     <td> 
     {{get (get-item-at-array-index items columnIndex rowIndex) 'id'}} 
     </td> 
     {{/each}} 
    </tr> 
    {{/each}} 
</table> 

der oben angegebene Template-Code-snippet enthält einen Helfer get-item-at-array-index benannt, die einfach an der gewünschten Indexposition die betreffende Position findet und es soll einen einfachen Code hat wie folgt:

export function getItemAtArrayIndex(params/*, hash*/) { 
    let array = params[0]; 
    let index = params[1]; 
    let rowIndex = params[2]; 

    return array[index+rowIndex*3]; 
} 

Ich habe folgendes twiddle für Sie vorbereitet, dass bis Wraps, was ich bereits oben erläutert. Auf diese Weise; Sie werden den Unclosed element tr Fehler vermeiden, den Sie bekommen; da die Tags explizit geschlossen werden und der Vorlagencompiler sich nicht beschweren wird.