title: Back button duplicating ajax requests on view load
body: <p><strong>Edit</strong></p>
  
  <p>I put a console.log in the fetch success callback of the home view (#/). These are the cid ids of the fetches each time the page loaded. You can see by the end there are 6 fetch requests being made when on the original page load there is only one.</p>
  
  <pre><code>/#: c2  
  /#link1 + back button: c4, c2  
  /#link1 + back button: c4, c2, c2, c2  
  /#link2 + back button: c4, c2, c2, c2, c2, c2
  </code></pre>
  
  <p><strong>Original</strong></p>
  
  <p>I'm experiencing an odd bug in backbone where the back button is causing ajax requests to duplicate. If I go to <code>#/</code> then click on <code>#/link</code> both of those make their ajax requests fine. The problem is when I hit the back button to go back to <code>#/</code>. It makes the normal ajax requests but twice. If I repeat the process each time I hit the back button it increased the number of duplicate requests (1 original + number of back buttons): 2 back button pushes = 3 ajax requests, 3 back button pushes = 4 ajax requests</p>
  
  <p>Even when I go to a completely different link (after I've used back button) on the view it duplicates that view's ajax requests. If I just click links and don't use the back button, the bug never happens.</p>
  
  <p>I'm using AppView in the router to clean up the old view and load the new view. This calls Backbone.View.prototype.close which in turns calls View.close. I think this is all sound but wanted to include just in case.</p>
  
  <p>Has any experienced this before?</p>
  
  <p><strong>AppView</strong></p>
  
  <pre><code>function AppView () {
    this.view = null;
  
    this.showView = function (view, renderOpts) {
      renderOpts = (typeof renderOpts === 'undefined') ? {} : renderOpts;
  
      if (this.view) this.view.close();
  
      this.view = view;
  
      $('.view').html(this.view.render(renderOpts).el);
    }
  }
  </code></pre>
  
  <p><strong>Backbone.View.prototype.close</strong></p>
  
  <pre><code>Backbone.View.prototype.close = function () {
    this.remove();
    this.unbind();
  
    if (this.onClose) this.onClose();
  };
  </code></pre>
  
  <p><strong>Router</strong></p>
  
  <pre><code>var Router = Backbone.Router.extend({
    routes: {
      '': 'home',
      'compound_interests/new': 'editCompoundInterest',
      'compound_interests/:id': 'viewCompoundInterest',
      'compound_interests/:id/parameters': 'compoundInterestParametersEditor',
      'compound_interests/:id/test': 'compoundInterestTester',
      'compound_interests/:id/stream': 'compoundInterestStreamer'
    },
    initialize: function (opts) {
      this.appView = opts.appView;
    },
    home: function () {
      var view = new HomeView();
      this.appView.showView(view);
    },
    editCompoundInterest: function () {
      var view = new EditCompoundInterestView();
      this.appView.showView(view);
    },
    viewCompoundInterest: function (id) {
      var view = new ViewCompoundInterestView({ id: id });
      this.appView.showView(view);
    },
    compoundInterestParametersEditor: function (id) {
      var view = new CompoundInterestParametersEditorView({ id: id });
      this.appView.showView(view);
    },
    compoundInterestTester: function (id) {
      var view = new CompoundInterestTesterView({ id: id });
      this.appView.showView(view);
    },
    compoundInterestStreamer: function (id) {
      var view = new CompoundInterestStreamerView({ id: id });
      this.appView.showView(view);
    }
  });
  
  router = new Router({ appView: new AppView() });
  </code></pre>
  
  <p><strong>Home View</strong></p>
  
  <pre><code>var Backbone = require('backbone'),
      _ = require('lodash');
  
  var CompoundInterests = require('../collections/compound_interests');
  
  module.exports = Backbone.View.extend({
    initialize: function () {
      var that = this;
  
      _.bindAll(this, 'render');
  
      this.template = JST['templates/home'];
      this.context = { data: {} };
  
      this.compoundInterests = new CompoundInterests();
      this.compoundInterests.on('sync', this.render);
      this.compoundInterests.fetch();
    },
    onClose: function () {
      this.compoundInterests.off('sync');
      this.render();
    },
    render: function () {
      this.context.data.compoundInterests = _.clone(this.compoundInterests.models);
      this.$el.html(this.template(this.context));
      return this;
    }
  });
  </code></pre>