Backbone.js — 匿名视图实例中的集合在获取时多次请求

Posted 2023-02-26

【中文标题】Backbone.js — 匿名视图实例中的集合在获取时多次请求

【英文标题】：Backbone.js — Collection in anonymous view instance requesting more than once on fetch

【发布时间】：2011-09-08 03:50:57

【问题描述】：

我正在使用路由器匿名实例化我的视图，因此我可以在初始化时简单地渲染它们。

window.Router = Backbone.Router.extend(
  routes: 
    '': 'index',
    ...
  ,

  index: function() 
    new SchoolsView();
  ,

  ...

);

window.SchoolsView = Backbone.View.extend(        
    events: 
        'click .more a': 'loadMore'
    ,

    initialize: function()     
        this.collection = new schoolList();

        this.collection.bind('add', this.add, this);
        this.collection.bind('reset', this.render, this);

        this.collection.fetch();
    ,

    render: function() 
      ...
    ,

    add: function(school) 
      ...
    ,

    loadMore: function() 
      this.collection.loadMore();
      return false;
    
);

视图的集合是在视图的构造函数内部构造的，具有计算的url 属性，该属性支持每个请求的分页“偏移”参数。在每个“下一页”请求之前，“offset”参数会加一，以便服务器返回结果的下一个偏移量。第一个collection#fetch() 使用initialize 方法的默认“偏移”值，一旦调用collection#loadMore() 方法，它就会递增。

window.schoolList = Backbone.Collection.extend(
  initialize: function() 
    this.offset = 1;
  ,

  url: function() 
    return this.baseUrl()+'?offset='+this.offset;
  ,

  pageInfo: function() 
    var info = 
      total: this.total,
      offset: this.offset,
      pages: Math.ceil(this.total / 9),
      more: false
    ;

    if (this.offset < info.pages) info.more = this.offset + 1;

    return info;
  ,

  loadMore: function() 
    if (!this.pageInfo().more) return false;
    this.offset += 1;
    return this.fetch( add: true );
  
);

它工作得很好，直到我从实现相关视图和集合的默认路由来回导航几次后注意到另一个路由；并单击调用集合的 collection#loadMore() 方法的元素，fetch() 被称为我导航回默认路由器的次数。

我希望它只调用一次fetch()，但它很容易在导航后调用该方法 2 次或更多次。这是因为在我更改路线并导航回来后实例没有被破坏吗？如果是这样，我不再需要对象后如何正确清理它？

【问题讨论】：

您希望 fetch 被调用一次吗？还是每次点击默认路线一次？

每次我点击默认路由。无论之前是否访问过，我都希望它在默认路由上获取新数据。

【参考方案1】：

window.Router = Backbone.Router.extend(
    routes: 
        '': 'index',
        ...
    ,

    index: function() 
    var collection = new schoolList(),
        view = new SchoolsView(
            collection: collection
        );

    this
        .trigger('destroy_index')
        .bind('destroy_index', function() 
            collection.reset();
            view.remove();
        );
    ,

    ...

);

window.SchoolsView = Backbone.View.extend( 
    initialize: function()     
        this.collection.bind('add', this.add, this);
        this.collection.bind('reset', this.render, this);

        this.collection.fetch();
    ,
    ...
);

【讨论】：

你能给这段代码粘贴更好的上下文吗？为什么你在路由访问时同时触发和调用 'destroy_index' 事件？

这将在绑定新观察者之前销毁旧观察者