I have a few pre-existing models on a server that are successfully fetched and rendered. However, when I save a new model, it doesn't get rendered until the page is refreshed. Is there a way to render the new model without reloading the page?
Below is my ListView code:
var GroupView = Backbone.View.extend({
tagName: 'ul',
initialize: function () {
this.collection = new StudentsCollection();
this.collection.on('update', this.render, this);
this.collection.fetch({
success: function () {
console.log('success!');
},
error: function (collection, response, options) {
console.log(options);
}
});
},
render: function () {
var self = this;
this.collection.each(function (student) {
var studentView = new StudentView({
model: student
});
self.$el.append(studentView.render().el);
});
$('.container').append(this.$el);
}
});
I've tried using the 'add' event on the collection but it ends up duplicating everything. Any suggestions?