Backbone & Require - 导航离开时销毁视图答案

【问题标题】：Backbone & Require - Destroy view when navigating awayBackbone & Require - 导航离开时销毁视图
【发布时间】：2014-06-04 11:50:35
【问题描述】：

我读过Derick Bailey's article on Zombies，但似乎无法弄清楚。我有一个使用 require.js 的主干应用程序，当我离开视图时需要能够关闭/销毁视图。

启动主干应用程序的方法有很多，但在使用 require 进行清理时，正确的方法是什么？以及如何在导航离开之前对视图调用 close() 函数？

Main.js

require([ "app", "backbone", "router", "facebook"], function(App, Backbone, Router, FB) {

    //theres a lot of facebook integration
    FB.init({
        appId      : '********',
        version    : 'v2.0'
    });

    //force the page to go to index when first arriving
    window.location.hash = "";

    new App;

    Backbone.history.start();
});

App.js

define([ "backbone", "router" ], function(Backbone, Router){

var App = function () {
    Router;
}

return App;
})

Router.js

define([ "backbone", "models/user" ], function(Backbone, User){

var AppRouter = Backbone.Router.extend({
    routes: {
               //All my routes
           },
            index: function () {
                require([ "views/index", "models/user" ], function (IndexView, UserModel) {
                    var indexView = new IndexView({ model: UserModel });
                 })
            },

           // Remaining route functions

return new AppRouter;
})

【问题讨论】：

标签： javascript backbone.js requirejs

【解决方案1】：

该帖子解决了您的代码在此处没有的问题。

仅当您的视图将事件处理程序附加到模型实例时才会出现问题（僵尸视图）。

var View = Backbone.View.extend({
  setup: {
    // model instance will now be storing a callback which is bound 
    // to *this* instance of a view
    this.model.on('change', this.render, this); 
  },
  render: function () {
    // whatever code that uses the context, `this`
    this.$el.innerHTML(this.model.get('title'));
  }
});

然后在您的应用程序生命周期中，上面的视图被渲染，然后页面发生了变化，或者发生了任何事情，并且不再需要该视图。但是可能还有其他任何东西正在使用该视图使用的模型——并且该模型可能会不断变化，然后它将触发change 事件的回调，render 方法将指向看似不存在的视图。

但是由于该视图可能不再在 DOM 中包含其元素，您将收到 DOM 错误（例如，如果您的渲染方法引用了 this.$el.parent()）并且视图将在您不知情的情况下保留在内存中，最终导致您的页面变慢甚至无响应。

自从写了那篇文章后，现在有了一种附加事件处理程序的新方法，称为listenTo，这使得stopListening 更容易。

现在还有View.prototype.remove 方法，它将从DOM 中删除视图的元素并调用stopListening，这将有助于您使用listenTo 为模型附加事件处理程序。

【讨论】：