backbone.js - Backbone EventAggregator 问题和问题

Question

我正在构建一个 Backbone 应用程序，使用 require.js 进行模块化加载，并使用 Marionette 来帮助我的应用程序结构和功能。我已经为事件聚合器设置了一个 require 模块，如下所示:-

define(['backbone', 'marionette'],function(Backbone, Marionette){
    var ea = new Backbone.Wreqr.EventAggregator();
    ea.on('all', function (e) { console.log("[EventAggregator] event: "+e);});
    return ea;
});

我希望将它传递到我的其他 require 模块中，并让它充当中央事件处理和消息传递组件，我在这方面取得了一些成功。我可以像这样毫无问题地将通风口作为依赖项传递给其他模块:-

define(['marionette', 'text!templates/nav.html', 'shell/vent'], function (Marionette, text, vent) {
    return SplashView = Marionette.ItemView.extend({
        template : text,
        events : {
            'click #splashContinueButton': 'onButtonClick'
        },
        onButtonClick : function(evt) {
            vent.trigger('onSplashContinueClick'); 
        }
    });
});

我遇到的问题是，虽然所有事件都在我的应用程序的不同位置触发(我可以在控制台日志中看到)，但我无法在我的应用程序的某些部分收听它们。例如，我有一个 Marionette 模块(在运行时作为 require 模块加载)，它试图获取一些像这样的事件:-

var SplashModule = shellApp.module("SplashModule");
SplashModule.addInitializer(function(){
    vent.on("onSplashModelLoaded", this.onSplashModelLoaded);
    vent.on("onSplashContinueClick", this.onSplashContinueClick);
}

我什么也没得到，即使我从这个地方记录通风口，我也可以将其视为一个对象。在日志中，它包含一个事件数组，实际上只包含根级别应用程序正在监听的事件，而不是应用程序其他部分正在监听的任何其他事件。这就是我的理解不一致的地方:我认为我可以将事件聚合器用作我的应用程序结构中的全局通信和消息传递系统。任何人都可以深入了解可能发生的事情吗？

非常感谢，

山姆

* 更新/编辑/解决方案 *

您好，好吧，我现在可以正常工作了(发布上述内容后仅 5 分钟 - 哦!)。基本上，在模块的初始化事件中添加我的监听器为时过早(据我所知)。我将它们沿着功能链进一步移动，现在一切都按预期运行。

Answer 1

为了使其正常工作，我必须做出的更改是我必须进一步删除模块中的通风监听器“onSplashContinueClick”。在此更改之前，它位于初始化函数中，但现在更进一步:-

define(["backbone", "marionette", "shell/vent", "shell/shellapp", "shell/splash/splashmodel", "shell/splash/splashview"], function(Backbone, Marionette, vent, shellApp, SplashModel, SplashView){

var SplashModule = shellApp.module("SplashModule");

SplashModule.addInitializer(function(){
    trace("SplashModule.addInitializer()");
    SplashModule.model = SplashModel;
    SplashModule.model.fetch({
        success:function(){
            //trace("splashModel.fetch success")
            SplashModule.onSplashModelLoaded();
        },
        error:function() {
            //trace("splashModel.fetch error")
        }
    });

});
SplashModule.addFinalizer(function(){

});
SplashModule.initView = function () {
    //trace("SplashModule.initView()");
    SplashModule.mainView = new SplashView({model: SplashModel});
    shellApp.mainRegion.show(SplashModule.mainView);
    vent.on("onSplashContinueClick", this.onSplashContinueClick);

};
SplashModule.end = function () {
    trace("SplashModule.end()");
    shellApp.mainRegion.close();
    vent.trigger("onSplashModuleComplete");
};


// events
SplashModule.onSplashModelLoaded = function () {
    trace("SplashModule.onSplashModelLoaded");
    SplashModule.initView();
};
SplashModule.onSplashContinueClick = function () {
    trace("SplashModule.onSplashContinueClick()");
    SplashModule.end();
};


return SplashModule;
});

我猜问题与依赖项可用和/或准备就绪的顺序有关。我相信在初始化方法期间，通风口还没有为听众准备好。这很可能与我在 require 模块中使用 Marionette 模块有关。