无限卷轴上的主干提取集合

Question

我正在学习主干，现在正在考虑如何应用无限卷轴，并在每次卷轴位于页面底部时从我的收藏中提取/加载20个项目。我一直在寻找不同的LIB之类的东西，但没有真正接近。有谁能解释/展示这是如何最好地完成的？

我现在已经添加了infiniscroll.js插件并试图让它工作。但是在滚动中它不会加载新项目。我应该在appendRender上做什么？怎么做？

    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;

Answer 1

我会这样做（尽管document.addEventListener（“滚动”）部分并不优雅

(function() {
    "use strict";

    var Item = Backbone.Model.extend({});

    var Items = Backbone.Collection.extend({

        model: Item,

        url: "/api/items/"
    });

    var ItemView = Backbone.View.extend({

        tagName: "li",

        render: function() {
            this.$el.html(this.model.get("name"));
            return this;
        }

    });

    var ItemsList = Backbone.View.extend({

        tagName: "ul",

        offset: 0,

        limit: 60,

        initialize: function() {
            this.collection = new Items();
            this.collection.on("reset", this.addAll, this);
            this.collection.on("add", this.addOne, this);
            this.getItems();
        },

        render: function () {
            return this;
        },

        getItems: function () {
            this.collection.fetch({
                "data": {"offset": this.offset, "limit": this.limit}, 
                "success": _.bind(function(e){
                    this.offset += this.limit;
                }, this)
            });
        },

        addOne: function(item) {
            var view = new ItemView({model: item});
            this.$el.append(view.render().$el);
        },

        addAll: function() {
            this.collection.each(this.addOne, this);
        }

    });

    var itemsList = new ItemsList();
    $(document.body).append(itemsList.render().$el);

    document.addEventListener('scroll', function (event) {
        if (document.body.scrollHeight == document.body.scrollTop + window.innerHeight) {
            itemsList.getItems();
        }
    });

}());

Answer 2

主干可分页插件支持无限滚动。

这只是您的收藏扩展主干的问题。PageableCollection，并指定一些额外属性。还有一个主干视图示例，它可以监听不断变化的集合，也可以在滚动中获取。

这一切都在github页面上描述。它更新得相当频繁。