主干js -表分页更新所有访问的视图

我是一个很新的骨干，所以可能有一个非常简单的解决方案来解决这个问题。我有一个应用程序，你可以查看一个显示页面，其中有一个表，我添加分页。我已经创建了一个实用程序对象Table来处理分页，因此它可以用于每个显示页面上的每个表:

var Table = function(rowsStart, increment, data) {
  this.rowsStart = rowsStart;
  this.increment = increment;
  this.data = data;
  this.totalRows = _.size(data);
  this.totalRowsRoundUp = Math.ceil(_.size(data)/10)*10;
  this.paginate = function(paginateVol) {
    // Scope the figures
    this.rowsStart += paginateVol
    this.increment += paginateVol
    rS = this.rowsStart;
    inc = this.increment;
    // Show first increment results
    var rowsToDisplay = [];
    $.each(this.data, function(i,e){
      if (i < inc && i >= rS) {
        rowsToDisplay.push(e)
      }
    });
    // Send back the rows to display
    return rowsToDisplay
  };
}

这在访问主干历史中的第一个显示页表时工作得很好，但是当我访问更多的显示页并操作这个分页对象时，它会触发所有访问的表视图，并在我当前的视图中产生奇怪的结果。

My View看起来像这样:

// Create a view for the outer shell of our table - not inclusive of rows
queriesToolApp.ReportKeywordsView = Backbone.View.extend({
  el: '#report-queries-js',
  events: {
    'click #prev' : 'clickBack',
    'click #next' : 'clickNext'
  },
  initialize: function() {
    // compile our template
    this.template = _.template($('#tpl_indiv_report').html()); 
    // create an instance of the Table paginator object
    this.paginator = new Table(0, 10, this.collection.attributes);
  },
  render: function(paginateVol) {
    // Scope this
    _this = this;
    var data = _this.collection.attributes;
    // Render the script template
    this.$el.html(this.template());
    // Select the table body to append
    var tableBody = $('#report-queries-row');
    // Store the keyword object and the pagination amount
    var keywordObj = this.paginator.paginate(paginateVol);
    // Append keyword data to page
    $.each(keywordObj, function(index, keyword){
      // Create a new instance of the individual view 
      var reportKeywordIndView = new     queriesToolApp.ReportKeywordIndView({model: keyword})
      // append this to the table
      tableBody.append(reportKeywordIndView.render().el);
      // start table listen when last row appended
    });
  },
  clickBack: function() {
    // Render the view passing in true as it's going back
    this.render(-10);
  },
  clickNext: function() {
    // Render the view passing in nothing as default is forward
    this.render(10);
  }
})

这是个人视图:

queriesToolApp.ReportKeywordIndView = Backbone.View.extend({
  tagName: 'tr',
  className: 'table-row',
  initialize: function() {
    // Define the template and compile the template in the view
    this.template = _.template($('#tpl_indiv_report_row').html());
  },
  render: function() {
    // Set the view with the data provided from the model
    this.$el.html(this.template(this.model));
    return this;
  }
})

我从这里开始:

  $(function() {
  // create a new instance of the router
  var router = new queriesToolApp.AppRouter();
  // Record the history of the url hash fragments
  Backbone.history.start();
  });

有办法解决这个问题吗?