Question

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

当我导航到第2页，然后返回第1页时，我可以看到fetch()数据被记录两次。 fetch调用会随着我离开的每个新时间向上递增，然后再返回到Page One。

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

以下是我使用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>

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

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

每次导航到页面时，骨干提取调用都会递增

2 个答案: