对象文字滚动中的未定义函数

Question

Hi Im trying to make an image gallery similar to instagram that loads images on scroll. Im trying it as an object literal variable but am getting an undefined method for this.showPics... getMore is called from an ajax success method. Is this a scope issue because of the scroller being called in the .scroll? How should I do this? BTW showPics is defined I just didnt paste it in.. Thanks

var Pics{
    showPics: function() {
        //loop thru images
    }
    scroller: function() {
        if ($(window).scrollTop() + $(window).height() == $(document).height()) {
            this.showPics();
        }
    }
    getMore: function(){
        $(window).scroll(this.scroller);
    }
}

Answer 1

Correcting syntax produces:

var Pics = {
    showPics: function() {
        //loop thru images
    },
    scroller: function() {
        if ($(window).scrollTop() + $(window).height() == $(document).height()) {
            this.showPics();
        }
    },
    getMore: function(){
        $(window).scroll(this.scroller);
    }
};

You were missing assignment after Pics and commas between member functions.

EDIT: Combined with https://stackoverflow.com/a/25184634/481422 answer from @Karl-André Gagnon it produces something alike http://jsfiddle.net/zlatin_zlatev/bue3ytek/

If this is alike what you need, please accept Karl-André Gagnon's comment as an answer.

Answer 2

In the function, this doesnt refer to the object anymore, but to the window. Try using bind like that :

$(window).scroll(this.scroller.bind(this));

It will change the reference of this inside the scroller function to the current object.

Also, you have syntax errors in your object, but I assume that you just made a pseudo code for the question, right?