Javascript 主干清除元素事件

我对主干非常陌生，正在努力解决如何在视图之间切换时解除元素事件的绑定

到目前为止，我有一个路由器加载和呈现一个视图

define([
    "underscore",
    "backbone"
], function (_, Backbone) {

    "use strict";

    var Router = Backbone.Router.extend({

        "views": {},

        "routes": {
            "bugs": "listBugs",
            "*other": "showDashboard"
        },

        "listBugs": function () {
            var oRouter = this;

            require([
                "views/bugs/list"
            ], function (View) {
                oRouter.views.bugsList = new View();
                oRouter.views.bugsList.render();
            });
        },

        "showDashboard": function () {
            var oRouter = this;

            require([
                "views/dashboard"
            ], function (View) {
                oRouter.views.dashboard = new View();
                oRouter.views.dashboard.render();
            });
        }

    });

    return Router;

});

我正在仪表板视图中处理事件

/* views/dashboard */
define([
    "underscore",
    "backbone",
    "text!templates/dashboard.html"
], function (_, Backbone, sTemplate) {

    "use strict";

    return Backbone.View.extend({
        "el": "main",
        "template": _.template(sTemplate),

        "events": {
            "click p": "testFunc"
        },

        "render": function() {
            var sHtml;
            sHtml = this.template();
            this.$el.html(sHtml);
        },

        "testFunc": function () {
            console.log("!");
        }
    });

});

问题是，如果我在/bugs和/bugs之间单击几次，然后单击一个p标记，就会有多行写入控制台（因为仪表板视图被多次创建），而且如果我在bugs视图中单击一个p标记，就会有一行写入控制台

当用户离开仪表板时，解除单击事件绑定的最佳（也是最简单）方法是什么

---

这是bugs视图，没什么大不了的

/* views/bugs/list */
define([
    "underscore",
    "backbone",
    "text!templates/bugs/list.html"
], function (_, Backbone, sTemplate) {

    "use strict";

    return Backbone.View.extend({
        "el": "main",
        "template": _.template(sTemplate),

        "render": function() {
            var sHtml;
            sHtml = this.template();
            this.$el.html(sHtml);
        }
    });

});

---

如果有人感兴趣，我的解决方案

/* Router */
define([
    "underscore",
    "backbone"
], function (_, Backbone) {

    "use strict";

    var Router = Backbone.Router.extend({

        "mainView": undefined,

        "routes": {
            "bugs": "listBugs",
            "*other": "showDashboard"
        },

        "renderView": function (oView) {
            if (typeof this.mainView !== "undefined") {
                this.mainView.close();
            }

            this.mainView = oView;
            this.mainView.render();

            $("main").html(this.mainView.el);
        },

        "listBugs": function () {
            var oRouter = this;

            require([
                "views/bugs/list"
            ], function (View) {
                var oView = new View();
                oRouter.renderView(oView);
            });
        },

        "showDashboard": function () {
            var oRouter = this;

            require([
                "views/dashboard"
            ], function (View) {
                var oView = new View();
                oRouter.renderView(oView);
            });
        }

    });

    return Router;

});

---

是否有理由在每次运行showDasboard方法时创建新视图？重新使用视图，您将不会遇到多个视图处理同一事件的问题：

"showDashboard": function () {
        var oRouter = this;

        require([
            "views/dashboard"
        ], function (View) {
            if(!oRouter.views.dashboard){
              oRouter.views.dashboard = new View();
            }
            if( oRouter.views.bugsList ){
              oRouter.views.bugsList.undelegateEvents();
            }
            oRouter.views.dashboard.render();
        });
    }

当然：

 "listBugs": function () {
        var oRouter = this;

        require([
            "views/bugs/list"
        ], function (View) {
            if(!oRouter.views.bugsList){
              oRouter.views.dashboard = new View();
            }
            if( oRouter.views.dashboard ){
              oRouter.views.dashboard.undelegateEvents();
            }
            oRouter.views.bugsList = new View();
            oRouter.views.bugsList.render();
        });
    }

然后，在视图的“渲染”方法中重新渲染其中一个视图时，需要再次委派它们：

 this.delegateEvents();

---

我建议查看此回购协议：

---

没有理由，我只是对这一点很陌生：）这解决了一个问题你能展示你的bug视图来解决第二个问题吗？；）我已将其添加到原始帖子中

 "listBugs": function () {
        var oRouter = this;

        require([
            "views/bugs/list"
        ], function (View) {
            if(!oRouter.views.bugsList){
              oRouter.views.dashboard = new View();
            }
            if( oRouter.views.dashboard ){
              oRouter.views.dashboard.undelegateEvents();
            }
            oRouter.views.bugsList = new View();
            oRouter.views.bugsList.render();
        });
    }

 this.delegateEvents();