Backbone Js, Update View On Model Change
Why my view is not getting updated?
Solution 1:
You were missing a few things.
- The row template should only render one row. The Table template repeats it in collection.each().
- You needed to specify which model the View was tied to. Now, when the model is changed, the View "listens to" that event and fires its render action. Note that you didn't specify a model, but the collection auto creates a model for each element in the data array it's passed.
- You were trying to use setElement for rendering the view. Rendering is as simple as passing your template's HTML to the jQuery object which is auto created by the view (this.$el in code below).
<html><scriptsrc="./jquery.js"></script><scriptsrc="./underscore.js"></script><scriptsrc="./backbone.js"></script><style>table,
td {
border: 1px solid #000;
}
</style><body></body><script>var rowTemplate = "<tr><td class='name'><%= name %></td><td class='age'><%= age %></td></tr>";
var data = [
{
'name': 'Bert',
'age' : 6
}, {
'name': 'Ernie',
'age' : 7
}
];
/** Collection of models to draw */var peopleCollection = newBackbone.Collection(data);
/** View representing a table */varTableView = Backbone.View.extend({
tagName: 'table',
initialize: function () {
_.bindAll(this, 'render', 'renderOne');
if (this.model) {
this.model.on('change', this.render, this);
console.log(this.model);
}
},
render: function () {
this.collection.each(this.renderOne);
returnthis;
},
renderOne: function (model) {
var row = newRowView({
model: model
});
this.$el.append(row.render().$el);
returnthis;
}
});
/** View representing a row of that table */varRowView = Backbone.View.extend({
events: {
"click .age": function () {
console.log(this.model.get("name"));
}
},
initialize: function () {
this.model.on('change', this.render, this);
},
model: peopleCollection.models,
render: function () {
var html = _.template(rowTemplate, this.model.toJSON());
this.$el.html(html);
returnthis;
},
});
var tableView = newTableView({
collection: peopleCollection
});
$("body").append(tableView.render().$el);
console.log(peopleCollection.models[0].set({
'name': 'Statler',
'age' : 100
}));
console.log(peopleCollection.models[0]);
</script></html>Solution 2:
You need to bind your view on model's change. I'm assuming you want to update RowView when a row is updated. I've rewritten your RowView. This will now listen to your model's change.
varRowView = Backbone.View.extend({
events: {
"click .age": function() {console.log(this.model.get("name"));}
},
initialize: function(){
this.model.on('change', this.render, this);
},
render: function() {
var html=_.template(rowTemplate,this.model.toJSON());
this.setElement( $(html) );
returnthis;
},
update : function() {
}
});
Post a Comment for "Backbone Js, Update View On Model Change"