В backbone.js, как обновить представление с новыми данными модели при сохранении упорядоченного порядка без полной визуализации

Question

У меня есть вид в backbonejs, привязанный к сортированной коллекции.

Я хочу периодически обновлять коллекцию новыми моделями, но поддерживать отсортированный порядок.

Каков наилучший способ вставить новые модели в представление без полного его рендеринга?

Answer 1

Collection.add, когда он запускает событие «добавить», передает хэш параметров, который содержит свойство «index», указывая, где, если коллекция сортируется с помощью компаратора, элемент вставляется.

Используя селектор п-го ребенка Jquery, вы можете вставить элемент в нужном месте:

$(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"}); 

    }) 

Живой пример: http://jsfiddle.net/DRN4C/6/

Answer 2

Я не хватает репутации комментировать другой ответ (я считаю, что это отличный ответ, и это всего лишь добавление), но вы должны отметить, что с версии 0.9.9 хэш-код options больше не будет включать свойство index. Из журнала изменений:

Чтобы улучшить производительность добавления, options.index больше не будет установлен в обратном вызове события add. collection.indexOf(model) может использоваться для извлечения индекса модели по мере необходимости.

В другой ответ, просто замените options.index с collection.indexOf(ship)