Question

我已阅读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;
})

Answer 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来帮助{{1}}附加模型的事件处理程序。

骨干＆amp;需要 - 导航时销毁视图

1 个答案: