CODEWITHSUNDEEP
javascripteventsbackbone.js
meleyal
meleyal

Reputation: 33240

How to trigger / bind custom events in Backbone.js views?

I have a Backbone View that uses iScroll to implement a slideshow.

iScroll publishes an onScrollEnd event, but I cannot seem to bind/subscribe to it inside the View:

App.Views.Scroller = Backbone.View.extend({

    events: {
        'onScrollEnd' : 'scrollEnd'
    },

    initialize: function(){
        var self = this;
        this.scroller = new iScroll('content-scroller', {
            onScrollEnd: function() {  
                self.trigger('onScrollEnd');
            }
        });     
    },

    scrollEnd: function(e){
        // never called :(
        console.log(e);
    }

});

Upvotes: 34

Views: 38422

Answers (3)

James Brown
James Brown

Reputation: 658

You should call the function directly or in your init, add this:

self.bind('onScrollEnd', self.scrollEnd);

Upvotes: 18

Dmitry G.
Dmitry G.

Reputation: 594

It might not be obvious, but event property in backbone.js views is used only for DOM events. Custom events should be bound as James Brown mentioned above.

Upvotes: 25

Bart
Bart

Reputation: 571

Your onScrollEnd event is bound to the view's top element; scrollEnd will be called when the view's HTML element received an onScrollEnd event.

But you are triggering an onScrollend event on your View object, not the element.

So you probably want to say $(self.el).trigger('onScrollEnd'); instead, or perhaps call the function directly: self.scrollEnd().

Upvotes: 24

Related Questions