Reputation: 7894
I am fairly new to javascript and have a simple page which displays a shopping cart summary in the top right corner.
When the update button is clicked the first time, the collection and view are updated as expected.
However, subsequent clicks have no effect and there is no errors in the console. The event handling appears to be lost after the first click.
I have noticed other similar problems posted on SO which point to the solution of invoking delegateEvents on the view object after .html() has been invoked. I have tried this but it has made no difference.
My backbone view is:
MyApp.View.Item = Backbone.View.extend({
events: {
'click #update-btn' : 'update',
'click #reset-btn' : 'reset'
},
initialize: function(){
console.log('item view initialize invoked');
this.collection = new MyApp.Collection.Items();
this.listenTo(this.collection, 'add', this.display);
var source = $("#cart-template").html();
this.template = Handlebars.compile(source);
},
render: function(){
console.log('render invoked');
var html = this.template(this.collection);
this.$el.html(html);
// this.delegateEvents(); <-- Tried this
return this;
},
display: function() {
$('#cart-summary').html(this.render().el);
},
update: function(e) {
console.log('update invoked');
e.preventDefault();
var newItem = new MyApp.Model.Item();
newItem.setName('blah');
newItem.setPrice(20);
this.collection.addItem(newItem);
},
reset: function(e) {
console.log('reset invoked');
e.preventDefault();
}
});
My collection is
MyApp.Collection.Items = Backbone.Collection.extend({
initialize: function(){
this.items = 0;
this.total = 0;
},
addItem: function(item) {
console.log('addItem invoked');
this.items++;
this.total += item.getPrice();
this.trigger('add');
}
});
I am using backbone 1.1.2, jquery 2.1.1 and Chrome 35.0.1916.153.
Thanks in advance.
Upvotes: 0
Views: 293
Reputation: 152
First, when you are creating the view, you should set your el to #chart-summary.
MyApp.View.Item = Backbone.View.extend({
el: '#cart-summary'
(your other stuff)
});
and try changing display function as follows
display: function() {
this.render();
},
Upvotes: 2
Reputation: 21
A tutorial example, http://backbonetutorials.com/what-is-a-view/, uses the following line to make a new view:
var view = new MyApp.View.Item({ el: $("#'div container id, which contains button view'") });
I think it provides a refreshed view, where the buttons will act upon a click. I think it should be your last line of code in your backbone view. Perhaps you're already doing this, however I failed to see that in your code..
Upvotes: 0