Question

我对骨干很新，所以可以有一个非常简单的解决方案来解决这个问题。我有一个应用程序，您可以在其中查看显示页面，其中有一个表格，我正在添加分页。我创建了一个实用程序对象表来处理分页，因此可以在每个显示页面的每个表上使用它：

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

这在访问主干历史记录中的第一个显示页面表时工作正常，但是当我访问进一步显示页面和操作时，它会在所有访问过的表视图上触发这个分页对象，并在我当前视图上产生奇怪的结果。

我的观点如下：

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

有解决方法吗？

Answer 1

我认为要保持你定义的对象，我会帮助你看到AppRouter代码。有一件事似乎是certian：ReportKeywordIndView实例不断创建，但可能没有被删除。这可以以不同的方式工作，没有额外的视图。

正如其中所写，行视图看起来太简单，无法成为骨干视图。您可以通过更改模板以包含TR标记，删除视图并在主视图中进行一些调整来解决此问题。

这可以进入初始化函数：

this.rowTemplate = _.template($('#tpl_indiv_report_row').html());

这可以替换创建行视图的每个代码并添加它：

// append this to the table
     tableBody.append(_this.rowTemplate(keyword));

backbone js - table pagination更新所有访问过的视图

1 个答案: