Ember Lenker Generieren Tabellen

Question

Ich bin neu in Ember/Lenker und benötigen ein Navigationstisch mit dem Formular

<table> 
    <tbody> 
     <tr class="headerRow"><td>Group 1</td></tr> 
     <tr><td>item1</td></tr> 
     <tr><td>item2</td></tr> 
    </tbody> 
    <tbody> 
     <tr class="headerRow"><td>Group 2</td></tr> 
     <tr><td>item1</td></tr> 
     <tr><td>item2</td></tr> 
    </tbody> 
</table> 

Diese mich Gruppen haben können zu erzeugen, die dynamisch erweitert/zusammengezogen werden kann, wenn die HeaderRow geklickt wird auf.

Beispiel JSON-Daten sieht aus wie

[{groupName: 'Group 1', item: 'item1'},{groupName: 'Group 1', item: 'item2'},{groupName: 'Group 2', item: 'item1'},{groupName: 'Group 2', item: 'item2'}] 

Ich muss durch die Daten zu durchlaufen und die tbody Gruppen erstellen, wenn der aktuelle Gruppenname als die letzte Gruppennamen unterscheidet. Dies ist eine triviale Aufgabe in Javascript/jQuery, um den HTML-Code als String zu erstellen und offene und body-Zeilen hinzuzufügen, aber wie mache ich das in Handlebars. Ich kann keine Möglichkeit finden, die letzte Gruppe in einer Variablen zu speichern (so dass ich mit der aktuellen Gruppe vergleichen kann), während ich die Formatierung {{# jede Daten als | Elementindex |}} Lenkstange verwende.

Ich habe die Aufgabe des Generierens der Tabelle über eine JS-Zeichenfolge mithilfe einer Hilfsfunktion ausgeführt, aber ich muss Komponentenaktionen an die Zeilen in der Tabelle anhängen. Was ist der richtige Weg, dies in Ember zu tun? Ich benutze Ember CLI 2.9.1.

Answer 1

Erster Einsatz .reduce() Ihre Daten restrukturieren:

yourData.reduce((res,item) => { 
    if(!res[item.groupName]) { 
    res[item.groupName] = [] 
    } 
    res[item.groupName].push(item.item); 
    return res; 
}, {}); 

Tun Sie dies in einer berechneten Eigenschaft.

{ 
    "Group 1": [ 
    "item1", 
    "item2" 
    ], 
    "Group 2": [ 
    "item1", 
    "item2" 
    ] 
} 

Nun ist es leicht, die gewünschten Daten zu erzeugen:

Dies wird eine bessere Struktur erzeugen

{{#each-in data as |group items|}} 
    <tbody> 
    <tr class="headerRow"><td>{{group}}</td></tr> 
    {{#each items as |item|}} 
     <tr><td>{{item}}</td></tr> 
    {{/each}} 
    </tbody> 
{{/each-in}}