Backbone.js 如何使用主干木偶复合视图进行分页？

我对脊梁和木偶还不熟悉。现在，我正试图用木偶的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;
});

define（['text！/Templates/projects/_GroupItem.html'，'collections/projects/groups']，函数（ProjectGroupsTmpl，GroupCollection）{
var GroupItemView=Backbone.marionete.ItemView.extend({
标记名：“li”，
模板：uu.template（ProjectGroupsTmpl）
});
var CompositeView=Backbone.marionete.CompositeView.extend({
模板：“
”，
itemView:GroupItemView，
itemViewContainer:“#ulgroups”，
初始化：函数（参数）{
this.isLoading=false；
this.ProjectID=params.id；
this.collection=新的GroupCollection（）；
这是getData（）；
var self=这个；
$（窗口）。滚动（函数（）{
self.checkScroll（）；
});
},
getData:函数（）{
var=这个；
this.isLoading=true；
this.collection.fetch（{
数据：{ProjectID:this.ProjectID}，
成功：函数（收集、响应、选项）{
this.isLoading=false；
}
});
},
checkScroll:function（）{
var triggerPoint=100；//100px从底部开始
如果（！this.isLoading&&$（window）.scrollTop（）+$（window.height（）+triggerPoint>$（document.height（））{
this.collection.page+=1；//加载下一页
这是getData（）；
}
},
appendHtml:函数（collectionView、itemView、index）{
$（this.itemViewContainer）.append（itemView.el）；
}
});
返回合成视图；
});

最近，我通过创建一个临时集合来保存每个分页请求的模型，解决了一个类似的问题。但是，我的设置与您的设置略有不同，因为我创建了一个木偶控制器来在数据和视图之间进行协商。控制器上的“show”方法处理初始数据请求，“showMore”方法处理后续请求。我基本上是这样做的：

(function ($, _, Backbone, Marionette) {
    var carData = [
        {
            make: 'Audi',
            model: 'A4',
            year: '1994'
        },
        {
            make: 'BMW',
            model: '3 Series',
            year: '1975'
        },
        {
            make: 'Chevrolet',
            model: 'Cruze',
            year: '2008'
        },
        {
            make: 'Daimler',
            model: 'Six',
            year: '1994'
        },
        {
            make: 'Fiat',
            model: '500X',
            year: '2015'
        },
        {
            make: 'Honda',
            model: 'Civic',
            year: '1972'
        },
        {
            make: 'Kia',
            model: 'Optima',
            year: '2015'
        },
        {
            make: 'Lada',
            model: 'Priora',
            year: '2007'
        },
        {
            make: 'Mitusbishi',
            model: 'Lancer',
            year: '1973'
        },
        {
            make: 'Nissan',
            model: 'Pathfinder',
            year: '1995'
        }
    ];
    var Car = Backbone.Model.extend({
        defaults: {
            make: '',
            model: '',
            year: ''
        }
    });
    var Cars = Backbone.Collection.extend({
        model: Car,
        rows: 3,
        page: 0
    });
    var CarView = Marionette.ItemView.extend({
        tagName: 'tr',
        template: '#row-template'
    });
    var CarsView = Marionette.CompositeView.extend({
        childView: CarView,
        childViewContainer: 'tbody',
        template: '#table-template',
        triggers: {
            'click button': 'showMore'
        }
    });
    var CarController = Marionette.Controller.extend({
        initialize: function (options) {
            this.collection = options.collection;
        },
        show: function () {
            var cars = this.getData(this.collection.page);
            var carsView = new CarsView({
                collection: new Backbone.Collection(cars)
            });
            this.listenTo(carsView, 'showMore', this.showMore);
            app.carsRegion.show(carsView);
        },
        showMore: function (options) {
            var cars = this.getData(++this.collection.page);
            options.collection.add(cars);
        },
        getData: function (page) {
            var rows = this.collection.rows;
            var start = page * rows;
            var end = start + rows;
            return this.collection.slice(start, end);

        }
    });
    var app = new Marionette.Application();
    var cars = new Cars(carData);
    var carController = new CarController({
        collection: cars
    });
    app.addRegions({
        carsRegion: '#cars-region'
    });
    app.addInitializer(function () {
        carController.show();
    });
    app.start();
}(jQuery, _, Backbone, Marionette));

这也可用作。

我曾用于解决上述问题，效果良好。下面是用于此目的的新代码

收藏：

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

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

木偶组合视图：

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

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

define（['text！/Templates/projects/_GroupItem.html'，'collections/projects/groups']，函数（ProjectGroupsTmpl，GroupCollection）{
var GroupItemView=Backbone.marionete.ItemView.extend({
标记名：“li”，
模板：uu.template（ProjectGroupsTmpl）
});
var CompositeView=Backbone.marionete.CompositeView.extend({
模板：“
”，
itemView:GroupItemView，
itemViewContainer:“#ulgroups”，
初始化：函数（参数）{
this.isLoading=false；
this.ProjectID=params.id；
this.grpcollection=新的GroupCollection（[]{
查询参数：{
ProjectID:params.id
}
});
this.collection=this.grpcollection.fullCollection；
这是getData（）；
var self=这个；
$（窗口）。滚动（函数（）{
self.checkScroll（）；
});
},
getData:函数（）{
var=这个；
this.isLoading=true；
this.grpcollection.fetch({
成功：功能（收集、响应、选项）{
如果（response.length>0）{
this.isLoading=false；
}
}
});
},
getNextPage:函数（）{
var=这个；
this.isLoading=true；
this.grpcollection.getNextPage({
成功：功能（收集、响应、选项）{
如果（response.length>0）{
this.isLoading=false；
}
}
});
},
checkScroll:函数（）{
var triggerPoint=100；//100px从底部开始
如果（！this.isLoading&&$（window.scrollTop（）+$（window.height（）+triggerPoint>$（document.height（））{
这个.getNextPage（）；
}
},
appendHtml:函数（collectionView、itemView、index）{
$（this.itemViewContainer）.append（itemView.el）；
}
});
返回合成视图；
});

谢谢smith，但是如果您想在视图内部提取集合，您有什么建议吗？您仍然可以从主集合（GroupCollection）中提取模型。只需将每次获取的相关模型添加到临时集合中。临时集合将以空的形式开始，并随着数据的每次新“拉动”而添加到。有道理？说到这里，我仍然建议创建一个控制器来管理数据请求和视图创建。有助于更清晰地分离关注点。