In Backbone.js, wie eine Ansicht mit neuen Modelldaten zu aktualisieren, während die sortierte Reihenfolge ohne eine vollständige Rendern beibehalten

Question

Ich habe eine Ansicht in Backbonejs an eine sortierte Auflistung gebunden.

Ich möchte die Sammlung regelmäßig mit neuen Modellen aktualisieren, aber die sortierte Reihenfolge beibehalten.

Was ist der beste Weg, die neuen Modelle in die Ansicht einzufügen, ohne sie vollständig zu rendern?

Answer 1

Collection.add Wenn das Ereignis "add" ausgelöst wird, wird ein Options-Hash übergeben, der eine "index" -Eigenschaft enthält und angibt, wo das Element eingefügt wird, wenn die Auflistung über einen Komparator sortiert wird.

Mit jQuery n-te-Kind-Selektor, können Sie den Artikel in der richtigen Stelle einfügen:

$(function() { 

     var ships = new Backbone.Collection(); 

     ships.comparator = function(ship) { 
      return ship.get("name"); 
     }; 

     ships.on("add", function(ship, collection, options) { 
      if (options.index === 0) 
       $('ul#list').prepend("<li>Ahoy " + ship.get("name") + " at " + options.index + "!</li>"); 
      else 
       $('ul#list li:nth-child('+ options.index +')').after("<li>Ahoy " + ship.get("name") + " at " + options.index + "!</li>"); 
     }); 

     ships.add([ 
      {name: "Flying Dutchman"}, 
      {name: "Black Pearl"} 
     ]); 

     ships.add({name: "Delaware"}); 

     ships.add({name: "Carolina"}); 

     ships.add({name: "America"}); 

    }) 

anschauliches Beispiel: http://jsfiddle.net/DRN4C/6/

Answer 2

ich auf der anderen Seite nicht genug Ruf Kommentar Antwort (ich glaube, es war eine ausgezeichnete Antwort, und dies ist nur ein Addendum), aber Sie sollten beachten, dass seit Version 0.9.9, options Hash nicht mehr eine index Eigenschaft enthält. Aus dem Changelog:

Um die Leistung von hinzufügen, wird options.index nicht mehr im add Ereignis-Callback festgelegt. collection.indexOf(model) kann verwendet werden, um den Index eines Modells nach Bedarf abzurufen.

In der anderen Antwort, ersetzen Sie einfach options.index mit collection.indexOf(ship)