Question

我对Backbone非常陌生，我正在努力解决在视图之间切换时如何取消绑定元素事件的问题。

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

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("!");
        }
    });

});

问题是，如果我在/和/ bug之间点击几次然后点击ap tag，就会有多行写入控制台（因为仪表板视图正在多次创建），如果我点击ap在错误视图中标记一行被写入控制台。

当用户离开仪表板时，解锁该点击事件的最佳（也是最简单）方法是什么？

这是错误视图，没什么好看的......

/* 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;

});

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

    "use strict";

    return Backbone.View.extend({
        "tagName": "div",
        "template": _.template(sTemplate),

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

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

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

});

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

    "use strict";

    return Backbone.View.extend({
        "tagName": "div",
        "template": _.template(sTemplate),

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

});

Answer 1

每次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();
        });
    }

然后，当您在视图的render方法中重新渲染其中一个视图时，您需要再次委托它们：

 this.delegateEvents();

Answer 2

我建议查看这个回购：

https://github.com/RStankov/backbone-bind-to

Backbone清理元素事件

2 个答案: