Updating presentation layer when the mongo document changes - mongodb

Question

I have a list of dogs in a table that have an underlying dog model and dog collection. When I update the dogName of a dog document in the mongo collection I want the table list item to update and show the new dog name without having to refresh the page.
I thought this was supposed to happen when you this.listenTo(this.model, 'change', this.render);
How can I get the table row item to update when the model changes??
window.Dog = Backbone.Model.extend({
urlRoot: "/dogs",
idAttribute:"_id",
initialize: function() {
}
defaults:{
_id: null,
dogName: "",
}
});
window.DogCollection = Backbone.Collection.extend({
model: Dog,
url: "/dogs/user/",
});
window.DogListView = Backbone.View.extend({
initialize: function () {
this.listenTo(this.model, 'change', this.render);
this.render();
},
render: function () {
var dogs = this.model.models;
$(this.el).html(this.template());
for (var i = 0; i < dogs.length; i++) {
this.$('#dogsTable tbody').append(
new DogListItemView({model: dogs[i], no: i+1}).render().el
);
}
this.$('#dogsTable').dataTable({
"bAutoWidth": false,"iDisplayLength": 50
});
return this;
}
});
window.DogListItemView = Backbone.View.extend({
tagName: "tr",
initialize: function (options) {
this.listenTo(this.model, 'change', this.render);
this.model.bind("change", this.render, this);
this.model.bind("destroy", this.close, this);
this.no = options.no;
this.render();
},
render: function () {
$(this.el).html(this.template({
no: this.no,
id: this.model.get("_id"),
dogName: this.model.get("dogName"),
}));
return this;
},
events: {
"click .delete": "deleteDog",
}
});
And finally in backbone controller I use this to load the view:
var dogList = new DogCollection();
dogList.url = "/dogs/user/" + this.user.get("_id");
dogList.fetch({
success: function() {
$('#content').html(new DogListView({model: dogList}).el);
}
});

Answer 1

What you're doing right now is:
Create some views (item- and collectionViews)
Define a collection
Set an url for this collection
Fetch the collection and on succes
Display the fetched data in these views
This is totally fine and these views will (probably, did not test your code) update once a change occurs in any of your models in the collection.
However, your application has no way of knowing that something is changed in your mongo database once it has fetched the data. If you would like to obtain this functionality, you could do for example one of the following;
Make the collection poll (and thus refetch) once in a while.
Inform your application that something has changed on the server using websockets. If you'd like to do this, you can use a library like http://socket.io