我们如何使用骨干木偶复合视图进行分页？

Question

我是骨干和木偶新手。现在我正在尝试使用 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;
});

木偶复合视图：

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

Answer 2

我最近通过创建一个临时集合来保存每个分页请求的模型解决了类似的问题。不过，我的设置与您的设置略有不同，因为我创建了一个 Marionette 控制器来在数据和视图之间进行协商。控制器上的“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));

这也可以作为 JSFiddle 使用。