Issue with el backbone view - backbone.js

Question

I don't understand why in my view el is defined only into loadResults function and not in checkScroll...may depends on documentAddEventLIstener("scroll",this.checkScroll,this)?
I can't understand reason
var HomePostView = Backbone.View.extend({
tagName: "ul",
// id: "list",
// el:$('.table-view'),
template: Handlebars.compile(template),
events: {
'scroll': 'checkScroll'
},
initialize: function () {
//console.log(this.collection);
// this.collection.bind("add", this.render, this);
document.addEventListener("scroll", this.checkScroll, this);
this.isLoading = false;
this.IntegratedCollection= new Integrated();
this.IntegratedCollection.twitterQuery=11265832;//spostare in load results
this.IntegratedCollection.fetch();
this.listenTo(this.IntegratedCollection,'add',this.render);
console.log((this.el));
},
render:function(){
this.loadResults();
},
loadResults: function (eventName) {
console.log((this.el));<-----WELL DEFINED HERE
this.isLoading = true;
$(this.el).empty();
_.each(this.IntegratedCollection.models, function (a) {
$(this.el).append(new SingleHomePostView({
model: a
}).render().el);
}, this);
this.isLoading = false;
return this;
},
setParameters: function(){
this.IntegratedCollection.page += 1; // Load next page
this.IntegratedCollection.twitterQuery=11265832;
this.IntegratedCollection.fetch();
},
checkScroll: function () {
console.log(this.el);<-----UNDEFINED HERE
var triggerPoint = 100; // 100px from the bottom
if( !this.isLoading && this.el.scrollTop + this.el.clientHeight + triggerPoint > this.el.scrollHeight ) {
console.log("inside");
// this.setParameters();
//this.loadResults();
}
}
});

Answer 1

I think your 'this' is pointing to window object. Try
that = this;//In initialize
and use that instead of this in checkScroll.

Answer 2

It is because of this:
document.addEventListener("scroll", this.checkScroll, this);
The DOM addEventListener function does take three arguments, but the third one is not a context argument, it is a boolean telling it whether to process events in the capture phase of event propagation. Instead, you can bind the event handler with the proper context:
document.addEventListener("scroll", this.checkScroll.bind(this));