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();
Best Answer
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.