无法解除绑定并关闭我的主干路由器中的事件

Cannot unbind and close events in my Backbone router

本文关键字：路由器 事件 我的 绑定      更新时间：2023-11-23

在加载新视图之前，我想清理Backbone中的视图。

为此，我搜索并向Backbone对象添加了一个名为close的原型属性：

Backbone.View.prototype.close = function () {
                this.$el.empty();
                //this.$el.unbind();
                this.undelegateEvents();
                console.log('close');
            };

附言：empty（）似乎不起作用，unbind也不起作用——undelegateEvents起作用。

现在，我似乎不知道如何在路由器上调用关闭功能：

define([
        'jquery', 
        'underscore', 
        'backbone',
        'views/userList',
        'views/addUser'
    ], function ($, _, Backbone, UserList, AddUser) {
        var Router = Backbone.Router.extend({
            routes: {
                '' : 'home',
                'new' : 'addUser'
            }
        });
        var initialize = function () {
            var router = new Router();
            router.on('route:home', function () {
                userList = new UserList();
                userList.render();
            });
            router.on('route:addUser', function () {
                addUser = new AddUser();
                addUser.render();
            });
            Backbone.history.start();
        }
        return { 
            initialize : initialize 
        }
    });

有什么想法吗？

首先，不要使用close，只需覆盖标准的remove方法：

var SomeBaseView = Backbone.View.extend({
    remove: function () {
        this.$el.empty(); // Instead of this.$el.remove();
        this.stopListening();
        this.undelegateEvents();
        return this;
    }
});

然后从CCD_ 3中导出您的所有视图。应避免与Backbone.View.prototype混在一起。

然后，停止使用这样的全局变量：

userList = new UserList();

在您的路由处理程序中。

然后，开始跟踪当前打开的视图，以便在抛出下一个视图之前可以对其调用remove。一个更像这样的路由器：

var Router = Backbone.Router.extend({
    routes: {
        '' : 'home',
        'new' : 'addUser'
    },
    home: function() {
        if(this.currentView)
            this.currentView.remove();
        this.currentView = UserList();
        this.currentView.render();
    },
    addUser: function() {
        if(this.currentView)
            this.currentView.remove();
        this.currentView = AddUser();
        this.currentView.render();
    }
});

您会放弃router.on调用，因为使用这种方法您不需要它们。

相关文章：