主干ListView创建僵尸

我正在尝试构建一个简单的crud应用程序，其中包含一个项视图和一个包含该项视图的listView，该视图是从集合构建的。我想为一个特定的项目创建一个detailView，但是当切换到这个detailView时，我不知道如何正确地处理listView。我见过在单个视图中移除僵尸的解决方案，但在由集合组成的视图中没有。是否有任何直接的方法来清理由视图组成的列表视图

var Model = Backbone.Model.extend({
defaults : {
    id : '',
    name : ''
}

});
var Collection = Backbone.Collection.extend({
model : Model
})
var HomeView = Backbone.View.extend({
tagName : "div",
id : "home-view",
initialize : function() {
    $("body").html(this.el);
    this.render();
},
render : function() {
    this.$el.html("<h1>This is the home page</h1><a href='#users'>Go to users</a>");
}
});

var UserView = Backbone.View.extend({
tagName : "li",
initialize : function(e) {

    _.bindAll(this, "alertName");
    this.render();
},
events : {
    "click" : "alertName"
},
render : function() {
    this.$el.html("Hi, my name is " + this.model.get('name'));
},
alertName : function() {
    alert(this.model.get('name'));
}
});
var UsersView = Backbone.View.extend({
tagName : "ul",
id : "users-list",
subViews : [],
initialize : function(e) {
    $("body").html(this.el);
    this.collection = new Collection([{
        id : '4',
        name : 'candy'
    }, {
        id : '2',
        name : 'soap'
    }, {
        id : '3',
        name : 'pepper'
    }]);
    console.log(this.collection)

    this.render();
},
render : function() {
    var self = this;
    this.collection.forEach(function(model) {

        var cView = new UserView({
            model : model
        })
        self.subViews.push(cView);
        self.$el.append(cView.el);
    })

    this.$el.after("<a href='#home'>Go to home</a>");
},
close : function() {

    while (this.subViews.length) {
        this.subViews.pop().remove();

    }

    this.remove();
}
});
var Router = Backbone.Router.extend({
routes : {
    "" : "home",
    "home" : "home",
    "users" : "users"
},
initialize : function(options) {
    console.log('router')

 },

  home : function(e) {
     console.log('home')
     this.loadView(new HomeView());

 },
users : function(e) {
    console.log('users');
      this.loadView(new UsersView());

},
loadView : function(view) {
    this.view && (this.view.close ? this.view.close() : this.view.remove());
    this.view = view;
}
});
$(document).ready(function() {

var router = new Router();
Backbone.history.start({

});
});

var Model=Backbone.Model.extend({
默认值：{
id:“”，
名称：“”
}
});
var Collection=Backbone.Collection.extend({
型号：型号
})
var HomeView=Backbone.View.extend({
标记名：“div”，
id:“主视图”，
初始化：函数（）{
$（“body”）.html（this.el）；
这个。render（）；
},
render:function（）{
这是。$el.html（“这是主页”）；
}
});
var UserView=Backbone.View.extend({
标记名：“li”，
初始化：函数（e）{
_.bindAll（以下简称“alertName”）；
这个。render（）；
},
活动：{
“单击”：“alertName”
},
render:function（）{
this.$el.html（“嗨，我的名字是”+this.model.get（'name'））；
},
alertName:function（）{
警报（this.model.get（'name'）；
}
});
var UsersView=Backbone.View.extend({
标记名：“ul”，
id:“用户列表”，
子视图：[]，
初始化：函数（e）{
$（“body”）.html（this.el）；
this.collection=新集合([{
id:'4'，
名字：“糖果”
}, {
id:'2'，
名称：“soap”
}, {
id:'3'，
名字：“胡椒”
}]);
console.log（this.collection）
这个。render（）；
},
render:function（）{
var self=这个；
this.collection.forEach（函数（模型）{
var cView=新用户视图({
型号：型号
})
self.subViews.push（cView）；
self.$el.append（cView.el）；
})
这是在（“”）之后的$el；
},
关闭：函数（）{
while（this.subViews.length）{
this.subViews.pop（）.remove（）；
}
这个。删除（）；
}
});
var Router=Backbone.Router.extend({
路线：{
“”：“家”，
“家”：“家”，
“用户”：“用户”
},
初始化：函数（选项）{
console.log（'路由器'）
},
主页：功能（e）{
console.log（'home'）
此.loadView（新的HomeView（））；
},
用户：功能（e）{
console.log（“用户”）；
this.loadView（newusersview（））；
},
loadView:函数（视图）{
this.view&（this.view.close？this.view.close（）：this.view.remove（））；
this.view=视图；
}
});
$（文档）.ready（函数（）{
var router=新路由器（）；
开始({
});
});

过去我就是这么做的：

基本上，您要做的是在创建这些新的

ItemView

s时跟踪它们。在您的

ItemsView

上创建一个

子项的散列，键入
model.cid
或其他内容（用于快速查找）或只是一个视图数组

在
ItemsView
上放置一个
remove
函数，调用该函数时将调用超级主干。查看#remove并循环遍历
子项
，并对每个子项调用remove

你也可以在你的
Itemsview
上放置一个
removietemview
方法，该方法取一个模型，在你的
子视图中查找它，然后调用
remove
。
为什么要使用
close
，而我们已经有一个调用
停止监听
和
这个的方法。$el.remove（）
？@muistooshort表示歉意。编辑我的答案，我太习惯于木偶，它有一个
close
，我不记得
主干。View
有一个
remove
方法。抢手货如何“调用超级主干网”以及如何引用特定的子视图？基本上，在
addOne
方法中，您可以执行类似
this.children.push（appView）的操作
然后在
ItemsView
上的
remove
中，您将在
this.children
中的每个元素上循环，并在其上调用
remove
。至于“调用super”，您需要执行以下操作：
Backbone.View.prototype.remove.apply（这是参数）
我可以创建数组并通过您提到的循环将其删除，但在Chrome的堆快照中，我仍然将所有列表视图项视为分离事件。