CODEWITHSUNDEEP
javascriptjquerybackbone.jsevent-handling
JamesB
JamesB

Reputation: 7894

Backbone view event handling lost after first click

I am fairly new to javascript and have a simple page which displays a shopping cart summary in the top right corner.

Before click

When the update button is clicked the first time, the collection and view are updated as expected.

After first click

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

Answers (2)

Mustafa D&#252;man
Mustafa D&#252;man

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

Christian B&#248;ge-Rasmussen
Christian B&#248;ge-Rasmussen

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

Related Questions