Массивный вид многоразового использования (установите новую модель на существующий вид)

Question

Каков наилучший подход для следующего параметра: длинный список, если элементы (несколько сотен человек), и после нажатия на запись списка открывается новое диалоговое окно с деталями.

Есть несколько вариантов (см также here):

1. используют модель «фиктивный» и один вид и изменить атрибуты фиктивных моделей -> не отражает изменения в исходной модели
2. изменить модель одного уже существующего вида
3. каждый раз, когда нажимается на список, создается новый вид, который создает модель -> производительность?
4. использовать marionette рамки -> есть небольшая документация, которая делает его трудно понять, для меня
5. использование JSPerf View -> Я попробовал онлайн демо, но на быстрой прокрутки было несколько ошибок

Я попытался вариант 2, но, похоже, имеются следы памяти.

ReusableView = Backbone.View.extend({ 
    setModel: function(model) { 
     // unbind all events 
     this.model.stopListening();   
     this.undelegateEvents(); 

     // set new model 
     this.model = model; 
     this.delegateEvents({ 
      "click": "onClicked", 
      "mouseover": "onMouseOver" 
     }); 
     this.initialize(); 
    }   
}); 

Вот fiddle были может быть создано множество моделей показали пользователь с одной точки зрения. Введите количество создаваемых моделей и нажмите «Создать модели».

Вопросы: Почему у вас есть следы памяти? Как правильно очистить после использования модели?

Для распределения памяти я использовал хром и его диспетчер задач. Потребление памяти около 30M для 70000 просмотров.

Answer 1

Это решение, которое я понял, после прочтения и тестирования много:

setModel: function(model) { 
    // unbind all view related things 
    this.$el.children().removeData().unbind(); 
    this.$el.children().remove(); 
    this.stopListening(); 

    // clear model 
    if (this.model) { 
     this.model.unbind(); 
     this.model.stopListening();   
    } 

    // set new model and call initialize 
    this.model = model; 
    this.delegateEvents(this.events); // will call undelegateEvents internally  
    this.initialize(); 
} 

Общий вид остался прежним, и все дети меняются.

Здесь вы можете найти скрипку http://jsfiddle.net/stot/H4qPG/20/ Я создал 1.000.000 моделей и в соответствии с хромированным диспетчером задач потребление памяти было стабильным в течение всего времени этого теста.

Полезная информация:

• Destroy or remove a view in Backbone.js
• http://lostechies.com/derickbailey/2011/09/15/zombies-run-managing-page-transitions-in-backbone-apps/