Question

我正在学习骨干，现在考虑如何应用无限滚动和fetch / load，每次滚动位于页面底部时，我可以从我的收藏中说出20个项目。在不同的库之后我一直在寻找很多，而且没有真正接近。任何能够解释/展示如何做到最好的人？

我现在已经添加了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

backbone-pageable插件支持无限滚动。

这只是你的集合扩展Backbone.PageableCollection，你指定了一些额外的属性。还有一个骨干视图示例，用于监听不断变化的集合，以及在滚动时获取。

这一切都在github页面上进行了描述。它经常更新。

Answer 2

我会这样做（虽然document.addEventListener（'scroll'） - 部分不是很优雅

(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();
        }
    });

}());

无限滚动上的主干fetch集合

2 个答案: