Kann Rückgrat Rendern einer Sammlung in umgekehrter Reihenfolge?

Ich bin mit Signalr-hub, um Ereignisse zu abonnieren, die auf dem server. Was für ein Ereignis ausgelöst und eine Nabe, die erfolgreich das Element hinzufügen zu einer Marionette CollectionView. Dies wiederum ist gerendert in einer Tabelle.

Weil sich die Tabelle der Veranstaltungen wird grundsätzlich eine Unterlage, möchte ich die Ereignisse in umgekehrter Reihenfolge und vorzugsweise immer nur n-Anzahl der Ereignisse.

Können Rückgrat 'automatisch' re-Rendern, eine Sammlung in umgekehrter Reihenfolge?

InformationsquelleAutor Joe | 2012-03-19

backbone.js marionette

11

Gehen durch die Auflistung in umgekehrter Reihenfolge normalerweise verwende ich eine Konstruktion wie diese:
```
_.each(collection.last(collection.length).reverse(), function(model){ });
```
InformationsquelleAutor JuliaCesar
8

Gibt es einen thread zu diesem Thema im https://github.com/marionettejs/backbone.marionette/issues/78

Obwohl Rückgrat hält die Sammlung sortiert nach der Definition eines Komparators, wie @breischl wies darauf hin, Marionette nicht automatisch re-Rendern der CollectionView, wenn änderungen in der Reihenfolge. In der Tat, Marionette hört add Veranstaltung auf die Sammlung und hängt eine neue ItemView.

Wenn Sie möchten, dass Ihre CollectionView immer der Anzeige von Elementen in umgekehrter chronologischer Reihenfolge, und Sie möchten, dass neue Elemente Hinzugefügt werden vorangestellt statt angehängt, dann überschreiben Sie die appendHtml Methode in Ihrer CollectionView wie folgt:
```
var MyCollectionView = Backbone.Marionette.CollectionView.extend({
  appendHtml: function(collectionView, itemView){
    collectionView.$el.prepend(itemView.el);
  }
});
```
Wenn Sie möchten, einfügen können, um an einem bestimmten Ort, wie @dira erwähnt im Kommentar, es gibt eine Lösung gepostet unter dem link oben auf github von sberryman, dass ich Schreibe hier für die Bequemlichkeit (disclaimer: habe ich noch nicht getestet der code unten persönlich):

Ändern appendHtml zu:
```
appendHtml: function(collectionView, itemView) {
  var itemIndex;
  itemIndex = collectionView.collection.indexOf(itemView.model);
  return collectionView.$el.insertAt(itemIndex, itemView.$el);
}
```
Und fügen Sie den folgenden zu erweitern jQuery zu bieten insertAt Funktion:
```
(function($) {
  return jQuery.fn.insertAt = function(index, element) {
    var lastIndex;
    if (index <= 0) return this.prepend(element);
    lastIndex = this.children().size();
    if (index >= lastIndex) return this.append(element);
    return $(this.children()[index - 1]).after(element);
  };
})(jQuery);
```
- beachten Sie, dass im Marionetten-2.x, appendHtml wurde geändert, um attachHtml. Hoffe, das hilft anderen! Das war genau das, was ich brauchte, um die Anzeige der Sammlung in umgekehrter Reihenfolge ohne messing der Bestellung für andere Logik in meinem web-app
InformationsquelleAutor Tony Abou-Assaleh
1

In der Regel haben Sie die rendering-nehmen Sie Platz in Ihrem Backbone.View 'Unterklasse'. Sie haben also so etwas wie:
```
render: function() {
  this.collection.each( function(model) {
    //some rendering of each element
  }, this );
}
```
this.collection ist vermutlich eine Backbone.Collection Unterklasse, und so können Sie einfach underscore.js Methoden auf es, um es in der Reihenfolge, die Sie mögen:
```
this.collection.reverse().each( ... )
this.collection.sort( function(m) { ... } ).each( ... )
```
Etc.

Natürlich bekommen Sie ein einzelnes element aus dem backend, und Sie möchten fügen Sie es an der richtigen Stelle, ohne re-rendering der ganzen Sache! So in diesem Fall gehen Sie einfach old-school und legen Sie Ihre Sortierschlüssel als rel Attribut oder data - Attribut für die Elemente und verwenden Sie, um insertAfter oder ähnlich mit jQuery in Ihre renderNewItem (oder ähnliche) Methode.
- Kein reverse()-Methode ist in underscore.js Methoden leider.
- Haha guter Punkt! Nicht wirklich ein Eckpfeiler meiner Antwort, obwohl. Sie könnte es rückgängig zu machen mit einem anderen Ansatz: _.each( _.toArray(this.collection).reverse(), function(m) { ... } );. Oder, wenn Sie wurden mit coffeescript Sie konnte nur schreiben Sie eine for-Schleife mit einen -1 step usw.
InformationsquelleAutor rfunduk
1

Rückgrat sorgt automatisch für Sammlungen in sortierter Reihenfolge. Wenn Sie möchten, verwenden Sie eine nicht-Standard-sort definieren comparator() Funktion auf Ihre Sammlung und es wird stattdessen verwenden. Der Komparator kann entweder ein oder zwei Argumente, sehen Sie das Rückgrat Dokumentation für details.

Können Sie dann machen Sie Ihre Sammlung in einem .each () - Schleife, und es wird kommen in der richtigen Reihenfolge. Neue Elemente hinzufügen, um die Ansicht in sortierter Reihenfolge ist bis zu Ihnen, obwohl.
- Dira, guter Punkt, das macht es leichter. Aber letztlich haben Sie immer noch, um Sie in den DOM an der richtigen Stelle.
- Ja, so verwenden Sie die jquery-N-te Kind und nach() oder vor()
InformationsquelleAutor Brian Reischl
1

Von dem, was Sie beschreiben, Sie müssen nicht re-Rendern der Sammlung in umgekehrter Reihenfolge. Fügen Sie einfach ein Ereignis für add auf Ihre Sammlung in dieser Ansicht und haben Sie eine Funktion aufrufen, die macht das Element nur Hinzugefügt und stellt es auf den Tisch.
```
this.collection.on('add', this.addItem);
```
InformationsquelleAutor ryanmarc
0

Können Sie rückgängig machen, Ihre Modelle in einer Sammlung wie so...
```
this.collection.models = this.collection.models.reverse()
```
InformationsquelleAutor alex
0

Wenn Sie lodash statt Unterstrich Sie können dies auch tun:
```
_(view.collection.models).reverse();
```
InformationsquelleAutor rekarnar
0

Als das Rückgrat der nicht-Unterstützung reverse iteration der Sammlung (und es ist nur Verschwendung von Ressourcen-in den Rückwärtsgang oder schlechter Sortieren der Sammlung) die einfachste und Schnellste Möglichkeit ist die Verwendung der for Schleife mit Abnehmender index über Modelle in der Sammlung.
```
for (var i = collection.length - 1; i >= 0; i--) {
    var model = collection.models[i];

    //your logic
}
```
Es ist nicht so elegant wie die Sortierung oder die Umkehrung der Sammlung mit Unterstrich, aber die Performance ist viel besser. Versuchen Sie, vergleichen Sie verschiedene loops hier nur um zu wissen, welche Kosten Sie zu schreiben foreach anstelle der klassischen für.

InformationsquelleAutor Andree

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.