Mit Marionette zum gruppieren von Elementen in einer collection anzeigen
Ich Baue eine Anwendung, die Rückgrat und marionette.js. Ich bin der Planung über die Verwendung einer Auflistung anzeigen zu präsentieren, die einige Elemente und dann lassen Sie gefiltert, sortiert und gruppiert werden.
Ich Frage mich, ob es irgendwelche guten design-Ideen für Sie tatsächlich ist, indem der html-Code in eine gruppierte Mode. Ich habe ein paar Ideen, aber ich Frage mich, ob jemand vielleicht Eingang auf die wäre besser zu gestalten.
Meine erste Idee ist, ändern Sie die appendHtml-Methode auf die Auflistung anzeigen, und wenn die Gruppierung aktiviert ist, kann ich die appendHtml Funktion entweder finden oder erstellen Sie das Kind-Gruppe bin und das Kind Blick in es.
appendHtml: function(collectionView, itemView, index){
var $container = this.getItemViewContainer(collectionView);
//get group from model
var groupName = itemView.model.get("group");
//try to find group in child container
var groupContainer = $container.find("." + groupName);
if(groupContainer.length === 0){
//create group container
var groupContainer = $('<div class="' + groupName + '">')
$container.append(groupContainer);
}
//Append the childview to the group
groupContainer.append(itemView);
}
Meine zweite Idee ist, auseinander brechen, die Sammlung in Gruppen erste und dann vielleicht rendert mehrere Ansichten... Dies scheint, wie es könnte mehr Arbeit, aber vielleicht auch ein bisschen besser, so weit als der code-Struktur betroffen ist.
Irgendwelche Vorschläge oder Gedanken hervorrufen Kommentare wären toll!
Dank
- Ich mag deine erste Ansatz besser, und es ist wahrscheinlich auch leichter. Präsentation Zeug sollte in den Blick, und es scheint seltsam, um split eine Sammlung nur zeigen Sie es anders. An einem gewissen Punkt möchten Sie vielleicht eine Schaltfläche zum Umschalten, ob die Listen-Ansicht gruppiert ist, dann mehrere Sammlungen könnten in die Quere kommen.
- Ja, das ist der, den ich ging mit... ich muss ein bisschen mehr aufpassen, dass Weg, obwohl... weil ich wollte fügen Sie eine überschrift zu jeder Gruppe... das heißt dann, ich brauche, um sicherzustellen, dass ich im Auge behalten die auch. Das ist bedauerlich, weil die Marionette hat eine große Aufgabe, die Verfolgung der hinzufügen/entfernen von Elementen w/o viel zusätzliche in der Regel...
- Ich Frage mich, ob es helfen würde, wenn Sie fügen Sie eine
comparator
um Ihre Sammlung zu Sortieren, die der Gruppe. Dann, wenn es irgendein add/remove/reset ändern, in der Ansicht Sie könnten wollen eine Art von post-processing-Schritt nach marionette funktioniert das einfügen/entfernen, einfügen der Header... ich denke, es gibt 1000 Möglichkeiten, etwas zu tun. - Wie lege ich diese zusammen... ich habe einen test-Durchführung mit der Gruppierung der erste Weg... und ich bin nicht sicher, ich mag es... das problem ist, dass ich mit einer gefilterten collection, die Elemente, die Hinzugefügt/entfernt/zurückgesetzt. Wenn ich nur werfen Sie die Kopfzeilen auf machen, dann wenn ein neuer filter definiert werden, die entfernt alle Gruppen die Elemente... der header bleibt, wenn ich alles neu zeichnen...
- Hi MattyP, wollen einfach nur, um Sie wissen zu lassen, dass ich brauchte, um Sie veränderten die Letzte Zeile zu groupContainer.append(itemView.el); in Reihenfolge für Sie zu arbeiten. Ich bin mir nicht sicher, ob es ist, weil der Versionen Unterschied. Hoffentlich hilft es jemanden.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Vielleicht nicht genau das, was du suchst, aber hier ist eine etwas Verwandte Frage:
Rückgrat.Marionette, Sammlung Elemente in einem raster (keine Tabelle)
Meine Lösung für das Problem -- eine geholt Sammlung, die gemacht werden könnte, als Liste oder raster ("items zusammengefasst in den Zeilen") zu nutzen, um die _.groupBy() in einen "wrapper" CompositeView und übergeben Sie Daten geändert haben, unten in der Kette zu einem anderen CompositeView (Zeile) und dann nach unten, um eine ItemView.
Hier ist eine demo:
http://jsfiddle.net/bryanbuchs/c72Vg/
Ich getan habe, sowohl der Dinge, Ihr nahezulegen, und Sie beide gut funktionieren. Weitgehend kommt es auf die eine, die Sie bevorzugen und vielleicht dem einen passt dein Szenario besser.
Wenn Sie Daten haben, die bereits in einer Hierarchie gruppiert, mit einer der vielen hierarchischen Modell /Kollektion plugins oder eigene Hierarchie-code, dann ist die Idee rendering eine Liste der Gruppen, mit jeder Gruppe Rendern eine Liste der Elemente ist wahrscheinlich einfacher.
Wenn Sie Daten haben, die flach ist, aber Sie enthalten ein Feld, dass Sie die Gruppe durch, dann die appendHtml änderungen wird wahrscheinlich einfacher sein.
hth
Dies ist zusätzlich zu Derick ' s und bryanbuchs' Antworten. Meine Methode verwendet eine Haupt-Sammlung-Ansicht und anderen Ansicht Sammlung als seine childView.
Sammlung von Ansichten, eine "addChild" - Methode, die aufgerufen wird, wenn Sie ein Modell Hinzugefügt, um die Ansicht der Sammlung. Das "addChild" - Methode ist verantwortlich für die Darstellung der kindlichen Sicht und hinzufügen, um die HTML für die Ansicht Sammlung an einen bestimmten index. Sehen Sie den source-code auf github hier. Ich ' ll fügen Sie es hier für Vereinfachung:
Wie Sie sehen können das "addChild" - Methode nennt das 'buildChildView' - Methode. Diese Methode tatsächlich baut der Blick.
Also für Ihren Fall können Sie überschreiben die "addChild" - Methode und rufen Sie die original-Methode, wenn Ihre Gruppierung Kriterien abgestimmt ist. Und dann in der überschriebenen 'buildChildView' - Methode übergeben werden können, die Gruppe (die eine Teilmenge der Sammlung) an seine childView, das ist eine andere Marionette.CollectionView.
Beispiel: