在不需要时处置模型/视图实例的最有效方法是什么?
通常,我将所有逻辑都放在控制器/路由器中。它决定了应该创建什么视图,以及应该向它们提供什么模型。通常,有一些处理函数,对应于不同的用户操作或路由,每次执行处理程序时我都会在其中创建新的视图实例。当然,这应该消除我之前存储在视图实例中的任何内容。但是,在某些情况下,某些视图自己保留 DOM 事件处理程序,并且它们没有正确解除绑定,从而导致这些实例保持活动状态。我希望是否有适当的方法来销毁视图实例,例如当它们的 el(DOM 表示)被分离或被抛出 DOM 时
你在正确的道路上。您应该有一个控制视图生命周期的对象。我不喜欢把它放在我的观点中。我喜欢为此创建一个单独的对象。
您需要做的是在必要时取消绑定事件。为此,最好在所有视图上创建一个“关闭”方法,并使用控制一切生命周期的对象始终调用关闭方法。
例如:
function AppController(){
this.showView = function (view){
if (this.currentView){
this.currentView.close();
}
this.currentView = view;
this.currentView.render();
$("#someElement").html(this.currentView.el);
}
}
此时,您需要将代码设置为只有一个 AppController 实例,并且始终从路由器或任何其他需要在屏幕的 #someElement
部分显示视图的代码调用 appController.showView(...)
。
(我有另一个使用“AppView”(运行应用程序主要部分的主干视图)的非常简单的主干应用程序示例,此处:http://jsfiddle.net/derickbailey/dHrXv/9/)
默认情况下,视图上不存在 close
方法,因此您需要自己为每个视图创建一个。 close 方法中应始终包含两件事:this.unbind()
和 this.remove()
。除此之外,如果您将视图绑定到任何模型或集合事件,您应该在 close 方法中取消绑定它们。
例如:
MyView = Backbone.View.extend({
initialize: function(){
this.model.bind("change", this.modelChanged, this);
},
modelChanged: function(){
// ... do stuff here
},
close: function(){
this.remove();
this.unbind();
this.model.unbind("change", this.modelChanged);
}
});
这将正确清除 DOM 中的所有事件(通过 this.remove()
)、视图本身可能引发的所有事件(通过 this.unbind()
)以及视图从模型绑定的事件(通过 this.model.unbind(...)
)。
一种更简单的方法是在 Backbone.View 对象上添加自定义关闭方法
Backbone.View.prototype.close = function () {
this.$el.empty();
this.unbind();
};
使用上面的代码,您可以执行以下操作
var myView = new MyView();
myView.close();
十分简单。
我总是对视图进行核对,有时会重用模型。如果您保留模型,确保视图被释放可能会很痛苦。如果模型未正确解绑,模型可能会保留对视图的引用。
从 Backbone ~0.9.9 开始,使用 view.listenTo() 而不是 model.on() 绑定模型允许通过控制反转(视图控制绑定而不是模型)更轻松地进行清理。如果 view.listenTo() 用于绑定,则调用 view.stopListening() 或 view.remove() 将删除所有绑定。类似于调用 model.off(null, null, this)。
我喜欢通过使用关闭函数半自动调用子视图来扩展视图来清理视图。子视图必须由父级的属性引用,或者必须将它们添加到父级中名为 childViews[] 的数组中。
这是我使用的关闭功能..
// fired by the router, signals the destruct event within top view and
// recursively collapses all the sub-views that are stored as properties
Backbone.View.prototype.close = function () {
// calls views closing event handler first, if implemented (optional)
if (this.closing) {
this.closing(); // this for custom cleanup purposes
}
// first loop through childViews[] if defined, in collection views
// populate an array property i.e. this.childViews[] = new ControlViews()
if (this.childViews) {
_.each(this.childViews, function (child) {
child.close();
});
}
// close all child views that are referenced by property, in model views
// add a property for reference i.e. this.toolbar = new ToolbarView();
for (var prop in this) {
if (this[prop] instanceof Backbone.View) {
this[prop].close();
}
}
this.unbind();
this.remove();
// available in Backbone 0.9.9 + when using view.listenTo,
// removes model and collection bindings
// this.stopListening(); // its automatically called by remove()
// remove any model bindings to this view
// (pre Backbone 0.9.9 or if using model.on to bind events)
// if (this.model) {
// this.model.off(null, null, this);
// }
// remove and collection bindings to this view
// (pre Backbone 0.9.9 or if using collection.on to bind events)
// if (this.collection) {
// this.collection.off(null, null, this);
// }
}
然后一个视图声明如下..
views.TeamView = Backbone.View.extend({
initialize: function () {
// instantiate this array to ensure sub-view destruction on close()
this.childViews = [];
this.listenTo(this.collection, "add", this.add);
this.listenTo(this.collection, "reset", this.reset);
// storing sub-view as a property will ensure destruction on close()
this.editView = new views.EditView({ model: this.model.edits });
$('#edit', this.el).html(this.editView.render().el);
},
add: function (member) {
var memberView = new views.MemberView({ model: member });
this.childViews.push(memberView); // add child to array
var item = memberView.render().el;
this.$el.append(item);
},
reset: function () {
// manually purge child views upon reset
_.each(this.childViews, function (child) {
child.close();
});
this.childViews = [];
},
// render is called externally and should handle case where collection
// was already populated, as is the case if it is recycled
render: function () {
this.$el.empty();
_.each(this.collection.models, function (member) {
this.add(member);
}, this);
return this;
}
// fired by a prototype extension
closing: function () {
// handle other unbinding needs, here
}
});
this.currentView = null;
对吗?