我們如何使用骨幹牽線木偶複合視圖進行分頁？

Question

我是新來的骨幹和木偶。現在我試圖用compositeview的marionettejs實現分頁。下面是我的代碼，這裏發生的情況是，當通過我的自定義尋呼機完成新的提取時，現有數據將被替換爲新數據集而不是附加數據。請幫我解決這個問題！提前致謝。

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

木偶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.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

我通過創建一個臨時收集保存的模型，每個分頁請求最近解決了類似的問題。然而，我的設置與你的設置略有不同，因爲我創建了一個木偶控制器來在數據和視圖之間進行協商。控制器上的「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。