Backbone.js-删除所有子视图

我有一个顶级页面视图，每当路由改变时，它会重新呈现自己。我有许多嵌套的子视图嵌入到这个页面视图中。如果要重新呈现页面视图，我需要删除/取消绑定页面视图中的所有嵌套子视图，还是只需要删除/取消绑定页面视图？如果需要删除/解除绑定所有子视图，那么最好的方法是什么？

是的，您需要正确删除和解除绑定它们：

实现这一点的简单方法是在父视图中存储子视图的数组。然后在父视图上的

close

方法中，循环遍历数组并在子视图上调用

close

方法：

ParentView = Backbone.View.extend({
  initialize: function(){
    this.childViews = [];
  },

  render: {
    for (var i = 0; i < 10; i++){
      var childView = new ChildView();
      // do stuff with the child view
      this.childViews.push(childView);
    }
  },

  close: function(){
    this.remove();
    this.unbind();
    // handle other unbinding needs, here
    _.each(this.childViews, function(childView){
      if (childView.close){
        childView.close();
      }
    })
  }
});

ParentView=Backbone.View.extend({
初始化：函数（）{
this.childViews=[]；
},
呈现：{
对于（变量i=0；i<10；i++）{
var childView=new childView（）；
//使用子视图执行操作
this.childView.push（childView）；
}
},
关闭：函数（）{
这个。删除（）；
这个。解除绑定（）；
//在这里处理其他解绑需求
_.each（this.childView，函数（childView）{
if（childView.close）{
childView.close（）；
}
})
}
});

---

当准备删除/替换父视图时，请确保在父视图上调用

close

方法。这将确保正确清理所有子视图（假设所有子视图都有自己的

close

方法）。

可以遍历视图的所有属性，查看哪些属性是主干视图的实例，而不是保留子视图的数组；您需要确保为父视图中的每个子视图设置属性

在下面的示例中，子视图设置为父视图的属性。我不确定在所有属性中循环会对性能造成什么影响，但是，这可能比跟踪子视图的单独数据结构更容易

示例：

var ContextView = Backbone.View.extend({
    initialize: function() {
      // views render themselves via their initialize methods
      this.titlebar = new TitlebarView({el: $("#titlebar")});       
      this.toolbar = new ToolbarView({el: $("#toolbar")});
      this.content = new ContentView({el: $("#content")});
    },
    removeChildViews: function() {      
        for(var prop in this){
            if (this[prop] instanceof Backbone.View) {
                console.log("This is a view: "+ prop + ' in ' + this[prop]);    
            }
        }
    }, 
    render: function() {
        this.$el.html(this.el);
    }
  });

---

您可能会发现一个简单的模块化类很有用

ContainerView = Backbone.View.extend({
  initialize: function() {
    this.children = [];
  },
  remove: function() {
    Backbone.View.prototype.remove.apply(this, arguments);
    this.removeAllChildren();
  },
  removeAllChildren: function() {
    _.each(this.children, function(view) { view.remove(); });
    this.children = [];
  },
  appendAllChildren: function() {
    _.each(this.children, function(view) { this.$el.append(view.render().$el); }, this);
  }
});

用法：

MyView = ContainerView.extend({
  render: function() {
    this.removeAllChildren();
    this.$el.empty();

    // For each child view...
    // this.children.push(new SomeControl(...));

    this.appendAllChildren();
    return this;
  }
});

---

有点像Zenginer所写的，我喜欢像下面一样对Backbone.View.remove进行全局修补，以便删除附加在上面的所有子视图

var originalRemove = Backbone.View.prototype.remove;

Backbone.View.prototype.remove = function ()
{

  for (var view in this){
    if (this[view] instanceof Backbone.View && this[view] != this) {
        this[view].remove();
    } 
  }


  originalRemove.apply(this, arguments);

}

---

取消绑定子视图是什么意思？你是说事件吗？嘿，德里克，我已经听从了你的建议，但是我在关闭一个视图+它的子视图时遇到了很长的延迟。在某些情况下，它可能长达5-10秒。延迟似乎来自于此。remove（）。你知道为什么吗？那太长了，太可怕了！老实说，我从未见过这种情况发生。。。要删除的DOM结构有多大？我唯一的猜测是一个非常慢的浏览器和/或一个非常大的DOM节点集。在每个语句的末尾都缺少一个“'）。我仍然使用这里描述的技术。我已经将它加入到我的主干应用程序的木偶网.js框架中，因此我不必再考虑它，考虑到1.1.2，这个.remove（）也会解除所有事件的绑定。所以不需要这个.unbind（）。但子视图仍需要关闭。。