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.
InformationsquelleAutor MattyP | 2013-02-12
Schreibe einen Kommentar