每次我导航到页面时，主干获取调用都会增加答案

【问题标题】：Backbone fetch calls incrementing up each time I navigate to page每次我导航到页面时，主干获取调用都会增加
【发布时间】：2014-08-15 00:49:40
【问题描述】：

我的 Backbone 应用有 2 个页面。第 1 页使用集合上的fetch() 方法来获取数据。

当我导航到第 2 页，然后返回到第 1 页时，我可以看到 fetch() 数据被记录了两次。每次我离开新页面时，fetch 调用都会向上递增，然后返回到第一页。

这是僵尸视图吗？我该如何阻止这种情况发生？

这是我使用 Backbone 的 JavaScript：

var MyModel = Backbone.Model.extend({
  defaults: {
    'id': 'null',
    'color': '',
    'date': '',
    'name': ''
  }
});

var MyCollection = Backbone.Collection.extend({
  model: MyModel,

  url: 'https://api.mongolab.com/api/1/databases/testdatabase/collections/Content?apiKey=xxxxxxxxxxxxxxx'
});

var aCollection = new MyCollection();

var MyViewOne = Backbone.View.extend({
  el: '.js-container',

  initialize: function () {

    this.collection = aCollection;

    this.listenTo(this.collection, 'sync', this.render);

    this.collection.fetch();
  },

  template: _.template( $('#One').html() ),

  render: function () {
    console.log('render One');
    console.log(this.collection);

    this.$el.html( this.template({collection: this.collection}) );

    return this;
  }
});

var MyViewTwo = Backbone.View.extend({
  el: '.js-container',

  template: _.template( $('#Two').html() ),

  render: function () {
    console.log('render Two');

    this.$el.html( this.template() );

    return this;
  }
});

var MyRouter = Backbone.Router.extend({
  routes: {
    '': 'pageOne',
    'pageone': 'pageOne',
    'pagetwo': 'pageTwo'
  },

  pageOne: function () {
    var myViewOne = new MyViewOne(); 
  },

  pageTwo: function () {
    var myViewTwo = new MyViewTwo();
    myViewTwo.render();
  }
});

var myRouter = new MyRouter();
Backbone.history.start();

这是我的 HTML：

<div>
  <ul class="nav">
    <li>
        <a href="#pageone">Page One</a>
    </li>
    <li>
        <a href="#pagetwo">Page Two</a>
    </li>
  </ul>
</div>

<div class="js-container">
</div>

<script type="text/template" id="One">
    Color = <%- collection.models[0].attributes.color %>
</script>

<script type="text/template" id="Two">
    Click the link "Page One" and check the console to see the fetch call for the collection incrementing.
</script>

【问题讨论】：

您每次访问页面时都会创建一个新视图，而无需清理旧视图。我不清楚的是您所看到的情况多次发生。每个视图实例都将监听集合上的“同步”事件并调用渲染作为响应，只有在视图实例化（初始化）时才会调用 fetch，所以当你说你看到“fetch”时我不确定你的意思' 发生多次。
@kinakuta 我认为它正在发生，因为我没有清理视图，而且我不太确定如何继续：清理视图。有一个console.log(this.collection)，这是我每次离开PageOne'并返回'PageOne'时看到的多次记录

标签： javascript jquery backbone.js

【解决方案1】：

var MyViewTwo = Backbone.View.extend({
    el: '.js-container',
    template: _.template( $('#Two').html() ),
    initialize: function() {
        this.render();
    },

    render: function () {
    console.log('render Two');

    this.$el.html( this.template() );

    return this;
    }
});

var MyRouter = Backbone.Router.extend({
    routes: {
        '': 'pageOne',
        'pageone': 'pageOne',
        'pagetwo': 'pageTwo'
    },

    pageOne: function () {
        this.pageView(new MyViewOne()); 
    },

    pageTwo: function () {
        this.pageView(new MyViewTwo());
    }
    pageView: function (view) {
        this.view && this.view.remove();
        this.view = view;
    }
});

【讨论】：

谢谢，但是当再次创建新视图时，这是否会阻止视图被记忆？这就是我试图弄清楚如何预防的问题。我认为这就是问题发生在我身上的原因，因为当我第一次转到第一个视图时，会创建一个视图，然后当我离开和返回第一个页面时，会创建另一个视图，但第一个视图从未被清理过。这就是我想要理解的，如果我解释得不够好，请见谅。
好的，我已经编辑了我的原始答案。如果在渲染新视图时在当前视图上调用 remove()，它会将其从 DOM 中移除。如果您尝试我建议的代码，它应该保留 pageOne 的引用，但在导航到 pageTwo 时将其从内存中删除。希望这能解决您的问题。
对不起，响应迟了，当我尝试使用 pageView 方法时，您演示它在我导航离开后没有呈现任何内容，然后返回 pageOne。这是因为它已被删除吗？

【解决方案2】：

我认为这个问题与未处理的视图有关你可以改变你的路由器来清理导航

var MyRouter = Backbone.Router.extend({
  currentViewOne : null,
  currentViewTwo : null,
  routes: {
    '': 'pageOne',
    'pageone': 'pageOne',
    'pagetwo': 'pageTwo'
  },

  navigate: function () {

      if (this.currentViewTwo) {
          this.currentViewTwo.unbind();
          this.currentViewTwo = null;
      }
      Backbone.Router.prototype.navigate.apply(this, arguments);
  },

  pageOne: function () {
      this.currentViewOne  = new MyViewOne(); 
  },

  pageTwo: function () {
    this.currentViewTwo = new MyViewTwo();
    this.currentViewTwo.render();
  }
});

【讨论】：