backbone.js: добавить элемент в коллекцию без повторного рендеринга всей коллекции - PullRequest
Новая
       22

backbone.js: добавить элемент в коллекцию без повторного рендеринга всей коллекции

8 голосов
/ 15 февраля 2012

У меня есть представление, которое отображает себя из коллекции: 

render: function() {

    $(this.el).html(JST['templates/menu']({collection: this.collection }));
    $('#nav').html(this.el);     
}

В инициализаторе представления я связываю событие добавления коллекции с функцией рендеринга представления: 

initialize: function() {
    this.render();
    var self = this;
    this.collection.bind("add", function(event){
        self.render();
    });
}

в другом месте приложения я добавляю элемент в коллекцию. 

bookSubscription_collection.add(model);

Проблема с этим кодом состоит в том, что если я добавляю новый элемент в коллекцию, то все элементы в коллекцииповторно вынесено.

Есть ли способ добавить новый элемент в коллекцию без повторного рендеринга всех других элементов, а просто с помощью нового элемента?

Ответы [ 3 ]

4 голосов
/ 15 февраля 2012

Это упрощенная версия того, как я это делаю. reset добавляет все модели в пользовательский интерфейс, а add добавляет одну модель в пользовательский интерфейс. addAll в основном имеет цикл, который вызывает addOne для каждой модели. Вероятно, его можно оптимизировать лучше, но он работает достаточно хорошо. 

initialize: function() {
    _.bindAll(this, 'render', 'addOne', 'addAll');

    leads.bind('add', this.addOne, this);
    leads.bind('reset', this.addAll, this);
  },
  render: function() {
    this.addAll();
    return this;
  },
  addOne: function(model) {
    // add the model to HTML
  },
  addAll: function(options) {
    leads.each(this.addOne);
    return this;
  }
3 голосов
/ 15 февраля 2012

Вместо того, чтобы связывать событие добавления коллекции с функцией рендеринга, свяжите его с какой-то другой функцией, которая принимает добавленную модель и изменяет DOM с данными из добавленной модели.

0 голосов
/ 15 февраля 2012

Авраам написал хороший пример.Я также использовал это как это 

initialize: ->    
  self = @
  @model.bind "add", (task) ->
    $(self.el).append new app.TaskIndexItemView(model: task).render().el

, но я думаю, что addOne - лучшее решение

...