简体   繁体   中英

Scroll event in View not firing (backbone.js)

I have a scroll event in my backbone.js View. However when I scroll the screen, the scroll event handler does not seem to be fired. $(windows).scroll() works fine though. Does this mean that the scroll event cannot be used for Views?

VIEW

PhotoListView = Backbone.View.extend({
    el: '#photo_list',

    events: {
        'scroll': function() {
            console.log('scrolling!');
        }
    },

    initialize: function() {
        this.collection.bind('reset', this.render, this);
    },

    render: function() {
        // ...
        }, this);
        return this;
    }
});

Also, if I want to use $(windows).scroll() to handle the scroll event, in which part of the backbone.js code should I insert it? Below is where I currently place it.

ROUTER

var AppRouter = Backbone.Router.extend({
    routes: {
        '': 'explore'
    },

    explore: function() {
        this.photoList = new PhotoCollection();
        var self = this;
        this.photoList.fetch({
            success: function() {
                self.photoListView = new PhotoListView({ collection: self.photoList });
                self.photoListView.render();

                // Check for Scrolling
                $(window).scroll(function() {
                    self.checkScroll();
                });
            }
        });
    },

    checkScroll: function() {
        var contentOffset = $('#photo_list').offset().top;
        var contentHeight = $('#photo_list').height();
        var pageHeight = $(window).height();
        var scrollTop = $(window).scrollTop();
        var triggerPoint = 100;

        if(contentOffset + contentHeight - scrollTop - pageHeight < triggerPoint) {

            this.photoListView.collection.requestNextPage()
                .done(function(data, textStatus, jqXHR) {
            });

        }
    }

});

var app = new AppRouter();
Backbone.history.start();

The scroll handler will fire when you scroll the element "#photo_list" since it's bound on that element.

$(window).scroll is for when you scroll the window.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM