Backbone: Wie wird eine Sammlungsansicht aktualisiert, wenn sich die Sammlung ändert?

8

Ich bin relativ neu bei Backbone.js. Ich initialisiere eine Sammlungsansicht und übergebe eine Sammlung zum Zeitpunkt der Erstellung.

%Vor%

Ich rendere dann die Sammlungsansicht. Jedes Mal, wenn ein Benutzer eine Abfrage in ein Textfeld eingibt, wird die Sammlung neu generiert und der Sammlungsansicht mit folgendem Befehl zugewiesen:

%Vor%

Dies kümmert sich um das Hinzufügen / Entfernen von Modellen in der Sammlung, aber wie verwalte ich das Hinzufügen / Entfernen von Ansichten für die hinzugefügten / entfernten Modelle?

Ich sollte erwähnen, dass ich den Listener this.collection.on ("add") in der Sammlungsansicht verwendet habe. Dies wird jedoch für jedes hinzugefügte Modell ausgelöst. Ich habe auch diese.model.on ("change") aus der individuellen Ansicht heraus versucht, aber diese wird nicht ausgelöst, wenn Modelle aus Sammlungen hinzugefügt / entfernt werden.

Jede Hilfe / Anleitung geschätzt!

Aktualisieren

Ich verwende jetzt:

%Vor%

Und wenn das Reset-Ereignis ausgelöst wird, entferne ich die Suggestion-Sub-Views, initialisiere sie für die neue Collection und rendere die Collection-View neu.

%Vor%

Sie glauben also, ich brauche mir keine Gedanken über die Zerstörung der Modelle zu machen?

    
Alex B 10.12.2013, 22:18
quelle

1 Antwort

13

Massenersetzungen sind einfacher und effizienter mit reset :

  

Zurücksetzen collection.reset([models], [options])

     

Das Hinzufügen und Entfernen von Modellen einzeln ist gut und gut, aber manchmal müssen Sie so viele Modelle ändern, dass Sie die Sammlung lieber nur in großen Mengen aktualisieren möchten. Verwenden Sie reset , um eine Sammlung durch eine neue Liste von Modellen (oder Attribut-Hashes) zu ersetzen, die am Ende ein einziges "reset" -Ereignis auslöst. Gibt die neu eingestellten Modelle zurück. Aus praktischen Gründen ist in einem "reset" -Ereignis die Liste aller vorherigen Modelle als options.previousModels verfügbar.

Also anstatt set zu verwenden, um die Änderungen zusammenzuführen und eine Reihe von 'add' und 'remove' -Ereignissen zu generieren Verwenden Sie reset und warten Sie auf 'reset' event:

%Vor%

und dann render kann das Ganze neu zeichnen und du würdest sagen:

%Vor%

um Dinge zu aktualisieren.

Einige Erläuterungen aus den Kommentaren : Modelle erzeugen keine 'add' -Ereignisse, nur Sammlungen lösen diese aus. Modelle lösen 'change' -Ereignisse aus, wenn sich ihre Eigenschaften ändern, Sammlungen lösen die Ereignisse 'add' und 'remove' aus, wenn ihnen Modelle hinzugefügt bzw. daraus entfernt werden; Sammlungen können auch 'change' -Ereignisse auslösen, weil sie alle Ereignisse von ihren eingeschlossenen Modellen weiterleiten :

  

Jedes Ereignis, das in einem Modell in einer Sammlung ausgelöst wird, wird auch direkt aus der Sammlung ausgelöst.

Wenn Sie also Collection#set verwenden möchten, sollten Sie drei Handler in Ihrer Ansicht haben:

  1. this.listenTo(this.collection, 'add', ...) : Ein neues Modell wurde zur Sammlung hinzugefügt, um es zu rendern.
  2. this.listenTo(this.collection, 'remove', ...) : Ein Modell wurde aus der Sammlung entfernt, also entfernen Sie seinen Teil der Ansicht.
  3. this.listenTo(this.collection, 'change', ...) : Ein Modell hat sich geändert, also aktualisieren Sie seinen Teil der Ansicht.

Wenn Sie nur mit kleinen Sammlungen arbeiten, funktioniert reset möglicherweise weniger. Wenn Ihre Sammlungen größer sind oder die Ansichtsänderungen teurer sind, ist es am besten, wenn Sie die drei Ereignisse getrennt behandeln.

Wenn Sie Sub-Views verwenden, sollten Sie auf jeden Fall eine Liste von ihnen in der übergeordneten Ansicht pflegen, damit Sie remove auf sie, um sicherzustellen, dass die Dinge richtig aufgeräumt sind. Wenn Sie die Modelle beim Entfernen aus der Sammlung löschen, können Sie die Unteransichten an die 'destroy' -Ereignisse ihres Modells binden und sich bei Bedarf selbst entfernen.

Der Veranstaltungskatalog kann eine Überprüfung wert sein, um zu sehen, welche Ereignisse wann ausgelöst werden.

    
mu is too short 10.12.2013, 23:14
quelle