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

Question

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);
    }

});

I also tried extending the scroller object with Backbone.Events — meleyal, Mar 21 '11 at 15:55

score 25 · Answer 1 · edited May 23 '17 at 12:32

25

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.

edited May 23 '17 at 12:32

Community

1
1

answered Dec 25 '11 at 15:00

Dmitry G.

584
5
13

2

For me this answer was just as important as the accepted answer. Thanks. – T. Junghans Jul 17 '12 at 13:20

Bart · Accepted Answer · 2011-03-21T17:25:05.120

24

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().

edited Mar 21 '11 at 17:25

answered Mar 21 '11 at 17:12

Bart

571
4
9

I ended up just calling the function directly. Seems to defeat the point but it works :) – meleyal Mar 21 '11 at 17:54
1

Or less verbose `self.$el.trigger('onScrollEnd');`. – VisioN Oct 30 '14 at 11:06

score 18 · Answer 3 · edited Dec 25 '11 at 22:52

18

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

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

edited Dec 25 '11 at 22:52

PeeHaa

71,436
58
190
262

answered Nov 06 '11 at 19:13

James Brown

658
6
13

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

3 Answers3

Linked