删除和取消绑定主干中的子视图

根据我的经验，简单地调用remove()和unbind()/off()就足以防止"僵尸"四处游荡。我要补充的唯一一点是，如果父视图（包含this._views内部子视图的父视图）是从应用程序的另一部分引用的，那么您必须确保通过将这些变量赋值为null来删除这些引用。

在父级中有一个this._views数组来保存其子视图是完全可以的。但是，随着应用程序的发展，您可能需要创建某种子视图管理器和所有其他视图都继承的核心视图。

以下是我过去所做的事情；我希望它能有所帮助：

CoreView：

// Probably all views should inherit from CoreView.
define([
  'jquery',
  'backbone',
  'subviews'
], function($, Backbone, Subviews) {
  var CoreView = Backbone.View.extend({
    $main: $('#main'),
    // Create an empty `subviews` property on all views.
    constructor: function() {
      this.subviews = new Subviews(this);
      // Since we're overriding `constructor` here, 
      // we need to delegate to Backbone
      Backbone.View.prototype.constructor.apply(this, arguments);
    },

    // Views should be attached to the DOM only with the `attach` method to have the right events thrown. 
    // Attach the view's element only if it's not already in the DOM.
    attach: function() {
      if (!this.isAttached()) {
        this.$main.append(this.el);
        this.trigger('dom:attach');
      }
      return this;
    },

    isAttached: function() {
      return $.contains(document.body, this.el);
    },

    // Remove each view's subviews and clean up various properties before 
    // calling Backbone's remove() method.
    remove: function() {
      if (this.subviews.size()) {
        this.subviews.removeAll();
      }
      // Remove the DOM element (jQuery makes sure to clean up DOM element's data)
      Backbone.View.prototype.remove.apply(this, arguments);
      // Fire a helpful `dom:detach` event when the view is removed from the DOM.
      this.trigger('dom:detach');
      this.off();
      return this;
    }
  });

  return CoreView;
});

子视图管理器（未完成）：

// Simple Subview Manager
define([
  'jquery',
  'backbone'
], function($, Backbone) {
  function Subviews(view) {
    this.self = view; // this view
    this._entries = {}; // its subviews
  }
  Subviews.prototype = {
    constructor: Subviews,
    add: function(name, viewInstance) { ... },
    has: function(name) { return !!this._entries[name]; },
    get: function(name) { return this._entries[name] && this._entries[name]; },
    // By default the subview manager tries to replace an element with
    // a `data-subview` attribute with the actual subview element.
    attach: function(name) {
      // In the parent view's template you would have: `<div data-subview="child1"></div>`
      var $subViewOutput = this.self.$('[data-subview="'+name+'"]');
      if (this._entries[name] && $subViewOutput.length) {
        $subViewOutput.replaceWith(this._entries[name].render().el);
      }
    },
    // When removing a subview we also have to remove it from
    // this view's `subviews` property.
    remove: function(name) {
      if (this._entries && this._entries[name]) {
        this._entries[name].remove();
        // Cleanup
        this._entries[name] = null;
        this._entries = _.omit(this._entries, name);
      }
    },
    removeAll: function() {
      if (this.size()) {
        _.each(this._entries, function(view) {
          view.remove(); // it will call remove() in CoreView first
        });
      }
      this._entries = {};
      this.self = null;
    },
    size: function() {
      return _.size(this._entries);
    }
  };

  return Subviews;
});

普通视图：

define([
  'jquery',
  'backbone',
  'templates',
  'views/coreView',
  'views/childView'
],
function($, Backbone, templates, CoreView, ChildView) {
  var Widget = CoreView.extend({
    tagName: 'section',
    id: 'widget123',
    template: templates.widget123,
    initialize: function() {
      this.subviews.add('child1', new ChildView());
      this.on('dom:attach', function() {
        // When the parent is inserted into the DOM also insert its child1
        this.subviews.attach('child1');
      });
    },
    render: function() {
      this.$el.html(this.template());
      return this;
    }
  });

  var instance = new Widget();
  instance.render().attach(); // attach() comes from CoreView
});