在Backbone.js中处理视图和模型对象

哪种模式/视图实例不需要时最有效的方式?

通常,我将所有的逻辑放在控制器/路由器中。 这是决定的,应该build立什么样的观点,以及应该为他们提供什么样的模式。 通常,有几个处理函数,对应于不同的用户操作或路由,每当处理程序执行时我都会创build新的视图实例。 当然,这应该消除以前存储在视图实例中的任何内容。 但是,在某些情况下,某些视图本身保留了DOM事件处理程序,并且没有正确解除绑定,导致这些实例保持活动状态。 我希望如果有一个正确的方式来销毁视图实例,例如当他们的el(DOM表示)分离,或抛出的DOM

你走在正确的道路上 你应该有一个对象来控制视图的生命周期。 我不喜欢把这个放在我看来。 我喜欢为此创build一个单独的对象。

你需要做的事情是在必要时解除事件。 要做到这一点,在所有视图上创build一个“close”方法是一个好主意,并使用控制所有事物生命周期的对象始终调用close方法。

例如:

function AppController(){ this.showView = function (view){ if (this.currentView){ this.currentView.close(); } this.currentView = view; this.currentView.render(); $("#someElement").html(this.currentView.el); } } 

在这一点上,你将设置你的代码只有一个AppController的实例,你总是会调用appController.showView(...)从你的路由器或任何其他代码,需要在#someElement部分显示一个视图你的屏幕。

(我有另一个非常简单的骨干应用程序的例子,使用“AppView”(运行应用程序的主要部分的骨干视图),在这里: http : //jsfiddle.net/derickbailey/dHrXv/9/ )

close方法在默认情况下并不存在于视图中,所以您需要自己为每个视图创build一个。 在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对象上添加一个自定义的close方法

 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)。

我喜欢用一个closures函数来扩展视图来清理视图,这个函数可以半自动地调用子视图。 子视图必须由父级的属性引用,或者必须将其添加到名为childViews []的父级内的数组中。

这是我使用的closuresfunction..

 // 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 ie 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 ie 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 } });