Render после добавления новой модели

Question

У меня есть несколько моделей на сервере, который уже загружен. Они извлекаются и обрабатываются успешно. Но когда я сохраняю новую модель, я не могу ее обработать. Когда я загружаю страницу - все в порядке: новая добавленная модель. Как я могу получить его на лету (без обновления страницы)?

Вот мой ListView

var GroupView = Backbone.View.extend({ 
    tagName: 'ul', 

    initialize: function() { 
     this.collection = new StudentsCollection(); 
     // this.collection.on('add', this.render, this); 
     this.collection.on('update', this.render, this); 
     // this.collection.on('reset', this.render, this); 
     this.collection.fetch({ 
      success: function() { 
       console.log('success!'); 
      }, 
      error: function (collection, response, options) { 
       console.log(options); 
      } 
     }); 
    }, 

    render: function() { 
     // this.$el.empty(); 
     var self = this; 

     this.collection.each(function (student) { 
      var studentView = new StudentView({ 
       model: student 
      }); 
      self.$el.append(studentView.render().el); 
     }); 
     $('.container').append(this.$el); 
    } 
}); 

Я попытался «добавить» событие на коллекции, но это просто дважды все. Есть предположения?

Answer 1

Использование add в коллекции - это правильная вещь, потому что вы хотите что-то сделать, когда добавлена ​​модель. Причина, по которой вы видите двойное из всего (я подозреваю, кроме недавно добавленного), заключается в том, что вы - функция рендеринга, просто добавляет к $el.

Магистраль не собирается очищать существующий вид перед рендерингом, вам нужно решить, какую стратегию использовать.

Самое простое решение - просто добавить this.$el.empty() и начать свой render. Я не рекомендую это делать, поскольку каждый раз, когда вы добавляете модель, она будет повторно отображать всю вещь.

Лучшее решение - создать функцию для добавления только одного вида в существующий вид и вызвать его на add.

как коснуться ниже

initialize: function() { 
    ... 
    this.collection.on('add', this.addStudentView, this); 
    ... 
} 

и

addStudentView: function(model) { 
    var studentView = new StudentView({ 
     model: model 
    }); 
    this.$el.append(studentView.render().el); 
}