Hi,

Im triyng to implement an infinite scroll to my backbone project. I want to fetch new items from my collection every time the scroll is at the bottom of the page.

Anyone that knows how to do this? Im currently trying to do it with this plugin: https://github.com/joneath/infiniScroll.js but don't get it to work. AS it is now all the items loads on first page load and then a call to the plugin fires but nothing new renders. any suggestions?

Feel free to come with other solutions as well!

Code:
    var StartView = Backbone.View.extend({

    tagName: "section",
    id: "start",
    className: "content",

    events: {

    },
    initialize: function(){
        $(".container").html(this.el);
        console.log("init start");
        this.template = _.template($("#start_template").html(), {} );
        this.collection = new VideoCollection();


        _.bindAll(this, "render");
        this.render();
        this.infiniScroll = new Backbone.InfiniScroll(this.collection, {
            success: this.appendRender,
            pageSize: this.collection.length,
            scrollOffset: 100
        });
    },

    appendRender: function() {
        var self = this;
        self.$el.html(self.template);
        self.$el.find(".videos").append("<div style='margin-bottom:30px; width:100%; height:170px; float:left; background-color:#e4e4e4;'>fff</div>")
    },

    render: function(){
        var self = this;
        this.$el.html("loading");
        console.log("render start")
    },
    kill: function() {
        console.log("kill start");
        this.remove(); 
    }
});
return StartView;