在 Backbone.js 中处理视图和模型对象 [英] Disposing of view and model objects in Backbone.js

问题描述

在不需要时处理模型/视图实例的最有效方法是什么?

Which is the most efficient way to dispose model/view instances when not needed?

通常，我将所有逻辑放在控制器/路由器中.它是决定应该创建什么视图以及应该向它们提供什么模型的人.通常，有一些处理程序函数，对应于不同的用户操作或路由，每次执行处理程序时，我都会在其中创建新的视图实例.当然，这应该消除我之前存储在视图实例中的任何内容.但是，在某些情况下，某些视图本身保留 DOM 事件处理程序，并且它们没有正确解除绑定，这会导致这些实例保持活动状态.我希望是否有一种适当的方法来销毁视图实例，例如它们的 el(DOM 表示)被分离，或者被抛出 DOM

Usually, I put all the logic in the controller/router. It is the one that decides, what views should be created, and what models should be supplied to them. Usually, there are a few handler functions, corresponding to different user actions or routes, where I create new view instances every time when a handler gets executed. Of course, that should eliminate whatever I've previously stored in the view instance. However, there are some situations when some views keep DOM event handlers themselves, and they don't get unbinded properly, which results in those instances being kept alive. I wish if there were a proper way to destroy view instances, when for example their el (DOM representation) gets detached, or thrown out of the DOM

推荐答案

您走在正确的道路上.您应该有一个控制视图生命周期的对象.我不喜欢把这个放在我的观点中.我喜欢为此创建一个单独的对象.

you're on the right path. you should have an object that controls the lifecycle of your views. i don't like to put this in my view. i like to create a separate object for this.

您需要做的就是在必要时解除绑定事件.为此，最好在所有视图上创建一个close"方法，并使用控制一切生命周期的对象始终调用 close 方法.

the thing you need to do, is unbind the events when necessary. to do this, it's a good idea to create a "close" method on all of your views, and use the object that controls the lifecycle of everything to always call the close method.

例如:

  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 部分显示一个视图.

at this point, you would set up your code to only have one instance of the AppController, and you would always call appController.showView(...) from your router or any other code that needs to show a view in the #someElement portion of your screen.

(我还有一个非常简单的主干应用程序示例，它使用AppView"(运行应用程序主要部分的主干视图)，这里:http://jsfiddle.net/derickbailey/dHrXv/9/ )

(i have another example of a very simple backbone app that uses an "AppView" (a backbone view that runs the main portion of the app), here: http://jsfiddle.net/derickbailey/dHrXv/9/ )

close 方法默认不存在于视图中，因此您需要为每个视图自己创建一个.close 方法中应该始终包含两件事:this.unbind() 和 this.remove().除此之外，如果您将视图绑定到任何模型或集合事件，您应该在 close 方法中解除它们的绑定.

the close method does not exist on views by default, so you need to create one yourself, for each of your views. There are two things that should always be in the close method: this.unbind() and this.remove(). in addition to these, if you are binding your view to any model or collection events, you should unbind them in the close method.

例如:

  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(...)).

this will properly clean up all of the events from the DOM (via this.remove()), all of the events that the view itself may raise (via this.unbind()) and the event that the view bound from the model (via this.model.unbind(...)).

这篇关于在 Backbone.js 中处理视图和模型对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！