Javascript 如何将基础对象中的侦听器附加到顶部/扩展对象

目标是：我想将基类中的侦听器附加到最顶层的继承实例

问题是：侦听器正在附加到基类；因此，每次新调用都会附加一个侦听器

详细信息：正如下面的代码片段所示，我正在使用require和backbone创建我的对象——每个文件一个对象。PrimaryObj扩展了midObj，midObj扩展了baseObj，baseObj扩展了Backbone.Model

视图模板中有一个字段和一个按钮，单击该字段和按钮时，会调用loadThing。用户可以用新值填充字段，然后每次单击按钮以加载新数据

然而，每次构建一个新对象时，属性都被正确分配，但这就像我得到一个对baseObj的引用，它已经连接了一个侦听器，而不是一个新的干净副本/克隆，它将不连接任何侦听器。。。然而

我认为在baseObj中对它的引用应该是指主/扩展对象primaryObj，而不是baseObj本身，它似乎是在连接它

如何将基础对象baseObj中的侦听器仅附加到顶部对象primaryObj

谢谢

main.js--------

require([ 'backbone', 'routers/router' ], function (Backbone, Router) {
    window.DISPATCHER = _.clone(Backbone.Events); 
    var router = new Router(); 
    Backbone.history.start(); 
});

define([ 'backbone', 'underscore' ], function (Backbone, _) {
    return Backbone.Model.extend({
        initialize : function (p_thing) {
          this.listenTo(window.DISPATCHER, "message",  function (p_data) { /*  some cool functionality  */ });
        }
    });
});

define([ 'models/baseObj' ], function (BaseOBJ) {
    return BaseOBJ.extend({
        initialize : function () {
          BaseOBJ.prototype.initialize.apply(this, arguments);
        }
    });
});

define([ 'models/midObj' ], function (MidOBJ) {
    return MidOBJ.extend({
        initialize : function (p_id) {
          this.set({'ref' : p_id});
          MidOBJ.prototype.initialize.apply(this, arguments);
        }
    });
});

define([ 'jquery', 'underscore', 'backbone', 'primaryObj' ], function($, _, Backbone, MPrimary) {
    return Backbone.View.extend({
        events     : { 'click .bLoad' : 'loadThing', },
        initialize : function (p_options) {
          this.listenTo(Backbone, 'obj:loaded', function () { this.render("device"); });
          this.model = {};
        },
        loadThing  : function (p_id) { this.model = new MDevice(p_id); },
        render     : function (p_target) { /* ... */ },
        template   : _.template(TModelTest)
    });
});

baseObj.js--------

require([ 'backbone', 'routers/router' ], function (Backbone, Router) {
    window.DISPATCHER = _.clone(Backbone.Events); 
    var router = new Router(); 
    Backbone.history.start(); 
});

define([ 'backbone', 'underscore' ], function (Backbone, _) {
    return Backbone.Model.extend({
        initialize : function (p_thing) {
          this.listenTo(window.DISPATCHER, "message",  function (p_data) { /*  some cool functionality  */ });
        }
    });
});

define([ 'models/baseObj' ], function (BaseOBJ) {
    return BaseOBJ.extend({
        initialize : function () {
          BaseOBJ.prototype.initialize.apply(this, arguments);
        }
    });
});

define([ 'models/midObj' ], function (MidOBJ) {
    return MidOBJ.extend({
        initialize : function (p_id) {
          this.set({'ref' : p_id});
          MidOBJ.prototype.initialize.apply(this, arguments);
        }
    });
});

define([ 'jquery', 'underscore', 'backbone', 'primaryObj' ], function($, _, Backbone, MPrimary) {
    return Backbone.View.extend({
        events     : { 'click .bLoad' : 'loadThing', },
        initialize : function (p_options) {
          this.listenTo(Backbone, 'obj:loaded', function () { this.render("device"); });
          this.model = {};
        },
        loadThing  : function (p_id) { this.model = new MDevice(p_id); },
        render     : function (p_target) { /* ... */ },
        template   : _.template(TModelTest)
    });
});

midObj.js--------

require([ 'backbone', 'routers/router' ], function (Backbone, Router) {
    window.DISPATCHER = _.clone(Backbone.Events); 
    var router = new Router(); 
    Backbone.history.start(); 
});

define([ 'backbone', 'underscore' ], function (Backbone, _) {
    return Backbone.Model.extend({
        initialize : function (p_thing) {
          this.listenTo(window.DISPATCHER, "message",  function (p_data) { /*  some cool functionality  */ });
        }
    });
});

define([ 'models/baseObj' ], function (BaseOBJ) {
    return BaseOBJ.extend({
        initialize : function () {
          BaseOBJ.prototype.initialize.apply(this, arguments);
        }
    });
});

define([ 'models/midObj' ], function (MidOBJ) {
    return MidOBJ.extend({
        initialize : function (p_id) {
          this.set({'ref' : p_id});
          MidOBJ.prototype.initialize.apply(this, arguments);
        }
    });
});

define([ 'jquery', 'underscore', 'backbone', 'primaryObj' ], function($, _, Backbone, MPrimary) {
    return Backbone.View.extend({
        events     : { 'click .bLoad' : 'loadThing', },
        initialize : function (p_options) {
          this.listenTo(Backbone, 'obj:loaded', function () { this.render("device"); });
          this.model = {};
        },
        loadThing  : function (p_id) { this.model = new MDevice(p_id); },
        render     : function (p_target) { /* ... */ },
        template   : _.template(TModelTest)
    });
});

primaryObj.js--------

require([ 'backbone', 'routers/router' ], function (Backbone, Router) {
    window.DISPATCHER = _.clone(Backbone.Events); 
    var router = new Router(); 
    Backbone.history.start(); 
});

define([ 'backbone', 'underscore' ], function (Backbone, _) {
    return Backbone.Model.extend({
        initialize : function (p_thing) {
          this.listenTo(window.DISPATCHER, "message",  function (p_data) { /*  some cool functionality  */ });
        }
    });
});

define([ 'models/baseObj' ], function (BaseOBJ) {
    return BaseOBJ.extend({
        initialize : function () {
          BaseOBJ.prototype.initialize.apply(this, arguments);
        }
    });
});

define([ 'models/midObj' ], function (MidOBJ) {
    return MidOBJ.extend({
        initialize : function (p_id) {
          this.set({'ref' : p_id});
          MidOBJ.prototype.initialize.apply(this, arguments);
        }
    });
});

define([ 'jquery', 'underscore', 'backbone', 'primaryObj' ], function($, _, Backbone, MPrimary) {
    return Backbone.View.extend({
        events     : { 'click .bLoad' : 'loadThing', },
        initialize : function (p_options) {
          this.listenTo(Backbone, 'obj:loaded', function () { this.render("device"); });
          this.model = {};
        },
        loadThing  : function (p_id) { this.model = new MDevice(p_id); },
        render     : function (p_target) { /* ... */ },
        template   : _.template(TModelTest)
    });
});

myView.js--------

require([ 'backbone', 'routers/router' ], function (Backbone, Router) {
    window.DISPATCHER = _.clone(Backbone.Events); 
    var router = new Router(); 
    Backbone.history.start(); 
});

define([ 'backbone', 'underscore' ], function (Backbone, _) {
    return Backbone.Model.extend({
        initialize : function (p_thing) {
          this.listenTo(window.DISPATCHER, "message",  function (p_data) { /*  some cool functionality  */ });
        }
    });
});

define([ 'models/baseObj' ], function (BaseOBJ) {
    return BaseOBJ.extend({
        initialize : function () {
          BaseOBJ.prototype.initialize.apply(this, arguments);
        }
    });
});

define([ 'models/midObj' ], function (MidOBJ) {
    return MidOBJ.extend({
        initialize : function (p_id) {
          this.set({'ref' : p_id});
          MidOBJ.prototype.initialize.apply(this, arguments);
        }
    });
});

define([ 'jquery', 'underscore', 'backbone', 'primaryObj' ], function($, _, Backbone, MPrimary) {
    return Backbone.View.extend({
        events     : { 'click .bLoad' : 'loadThing', },
        initialize : function (p_options) {
          this.listenTo(Backbone, 'obj:loaded', function () { this.render("device"); });
          this.model = {};
        },
        loadThing  : function (p_id) { this.model = new MDevice(p_id); },
        render     : function (p_target) { /* ... */ },
        template   : _.template(TModelTest)
    });
});

---

最后，人们发现问题并不是问题所在。听者被正确处理，但从未得到清理；因此，'old'/原始对象被垃圾收集，但它的侦听器没有被正确地收集

如问题中所述，此.listenToBackbone。。。在主干对象上创建与对象相关的侦听器，而不是创建的对象；然后，解决方案是显式删除主干对象上的侦听器