backbone.js - 我们如何使用 Backbone Marionette 复合 View 进行分页？

Question

我是 backbone 和 marionette 的新手。现在我正在尝试使用 marionettejs 的 compositeview 实现分页。下面是我的代码，这里发生了什么，当通过我的自定义寻呼机完成新的提取时，现有数据将被新数据集替换而不是附加。请帮助我克服这个问题!提前致谢。

 define(['text!/Templates/projects/_GroupItem.html', 'collections/projects/groups'], function (ProjectGroupsTmpl, GroupCollection) {
    var GroupItemView = Backbone.Marionette.ItemView.extend({
        tagName: 'li',
        template: _.template(ProjectGroupsTmpl) 
    });
    var CompositeView = Backbone.Marionette.CompositeView.extend({
        template: _.template("<ul id='ulgroups' ></ul>"),
        itemView: GroupItemView,
        itemViewContainer: '#ulgroups',
        initialize: function (params) {
            this.isLoading = false; 
            this.ProjectID = params.id;
            this.collection = new GroupCollection();
            this.getData();
            var self = this;
            $(window).scroll(function () {
                self.checkScroll();
            });
        },
        getData: function () { 
            var that = this;
            this.isLoading = true;
            this.collection.fetch({ 
                data: { ProjectID: this.ProjectID },
                success: function (collection, response, options) { 
                    that.isLoading = false;
                }
            });
        },
        checkScroll: function () { 
            var triggerPoint = 100; // 100px from the bottom 
            if (!this.isLoading && $(window).scrollTop() + $(window).height() + triggerPoint > $(document).height()) { 
                this.collection.page += 1; // Load next page 
                this.getData();
            }
        },
        appendHtml: function (collectionView, itemView, index) {            
            $(this.itemViewContainer).append(itemView.el);
        }
    });
    return CompositeView;
});

Answer 1

我用过backbone.paginator解决上述问题，效果很好。以下是用于此的新代码。

集合:

   define([
  'jquery',
  'underscore',
  'backbone',
  'helper',
  'paginator'
], function ($, _, Backbone) {
    var Groups = Backbone.PageableCollection.extend({
        url: 'projects/_groups',
        mode: "infinite",
        state: {
            pageSize: null 
        },
        queryParams: {
            totalPages: null,
            totalRecords: null 
        }
    });
    return Groups;
});

Marionette 复合 View :

define(['text!/Templates/projects/_GroupItem.html', 'collections/projects/groups'], function (ProjectGroupsTmpl, GroupCollection) {
    var GroupItemView = Backbone.Marionette.ItemView.extend({
        tagName: 'li',
        template: _.template(ProjectGroupsTmpl)
    });
    var CompositeView = Backbone.Marionette.CompositeView.extend({
        template: _.template("<ul id='ulgroups' ></ul>"),
        itemView: GroupItemView,
        itemViewContainer: '#ulgroups',
        initialize: function (params) {
            this.isLoading = false;
            this.ProjectID = params.id;
            this.grpcollection = new GroupCollection([], {
                queryParams: {
                    ProjectID: params.id
                }
            });
            this.collection = this.grpcollection.fullCollection;
            this.getData();
            var self = this;
            $(window).scroll(function () {
                self.checkScroll();
            });
        },
        getData: function () {
            var that = this;
            this.isLoading = true;
            this.grpcollection.fetch({
                success: function (collection, response, options) {
                    if (response.length > 0) {
                        that.isLoading = false;
                    }
                }
            });
        },
        getNextPage: function () {
            var that = this;
            this.isLoading = true;
            this.grpcollection.getNextPage({
                success: function (collection, response, options) {
                    if (response.length > 0) {
                        that.isLoading = false;
                    }
                }
            });
        },
        checkScroll: function () {
            var triggerPoint = 100; // 100px from the bottom 
            if (!this.isLoading && $(window).scrollTop() + $(window).height() + triggerPoint > $(document).height()) {
                this.getNextPage();
            }
        },
        appendHtml: function (collectionView, itemView, index) {
            $(this.itemViewContainer).append(itemView.el);
        }
    });
    return CompositeView;
});