Backbone EventAggregator問題和問題

我正在構建一個使用require.js進行模塊加載和Marionette以幫助我構建應用程序和功能的Backbone應用程序。我已成立了一個要求對事件聚集這樣的模塊： -Backbone EventAggregator問題和問題

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

我希望把它傳遞到我的其他需要的模塊，並把它的功能爲中心的事件處理和通訊組件，我得到一些成功與此。我可以通過通風口作爲依賴，其他模塊沒有問題，像這樣： -

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'); 
     } 
    }); 
});

我遇到的問題是，雖然所有的事件都在不同的地方在我的應用越來越觸發（我可以看到在控制檯日誌中），我無法在我的應用程序的某些部分收聽它們。比如我有一個木偶模塊（在運行時加載的要求模塊），這是試圖拿起一些這樣的活動： -

我什麼也沒得到，即使當我登錄通風口從這個地方我可以將其視爲一個對象。在日誌中，它包含的事件數組實際上只包含根級應用程序正在偵聽的事件，而不包含應用程序其他部分正在偵聽的任何其他事件。這是我理解崩潰的地方：我認爲我可以使用事件聚合器作爲跨應用程序結構的全局通信和消息傳遞系統。任何人都可以擺脫對可能發生的事情的任何見解嗎？

許多感謝，

山姆

* UPDATE /編輯/解決方案*

你好，好了，我有張貼（僅5分鐘後，現在它的工作以上 - doh！）。基本上，在模塊的初始化器事件中添加我的監聽器還爲時過早（據我所知）。我將它們沿功能鏈進一步移動，現在一切都按預期行事。

來源

2013-04-23 SamBrick

你可以發佈您的解決方案作爲一個答案？也許有更多的細節？這可能有助於未來的人。 – nikoshr 2013-04-23 14:01:51

@nikoshr - 你去了。 – SamBrick 2013-04-23 14:38:40

爲了讓它工作，我必須做的改變是我必須在模塊內部進一步移除放音監聽器「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; 
});

我猜測的問題與當依賴條件和/或準備的順序做。我相信在初始化方法期間發佈者尚未準備好接收者。這很可能與我在需求模塊中使用Marionette模塊有關。

來源

2013-04-23 14:38:16 SamBrick

使用RequireJS還涉及到一些乾淨的模塊... Backbone.Wreqr.EventAggregator是一個模塊，它是Marionette.js（備案，德里克·貝利只是把這個模塊的一部分即發由他人庫內的其他人使用，同樣的事情Backbone.BabySitter）使用RequireJS，你是有限的看到什麼是出口的圖書館，在這種情況下，木偶我認爲最好的辦法是將木偶分成3它實際上包含backbone.babysitter，backbone.wreqr和牽線木偶模塊。然後，你必須創建一個墊片爲每個模塊

我用這個

require.config({  
    baseUrl: "/Scripts/",   
    paths: { 
    "json2": "vendor/JSON2", 
    "backbone": "vendor/backbone/backbone.1.1.0", 
    "localStorage": "vendor/backbone/backbone.localStorage.1.1.9", 
    "marionette": "vendor/backbone/backbone.marionette.1.8.6", 
    "bootstrap": "vendor/bootstrap/bootstrap.3.1.1", 
    "jquery": "vendor/jquery/jquery.1.8.3", 
    "text": "vendor/Require/text.0.27.0", 
    "underscore": "vendor/underscore/underscore.1.5.2", 
    "wreqr": "vendor/backbone/backbone.wreqr", 
    "babysitter": "vendor/backbone/backbone.babysitter", 
    }, 
    shim: { 
    "json2": { 
     exports: "JSON" 
    }, 
    "jquery": { 
     exports: "$" 
    }, 
    "underscore": { 
     exports: "_" 
    }, 
    "bootstrap": { 
     deps: ["jquery"] 
    }, 
    "backbone": { 
     deps: ["underscore", "jquery"], 
     exports: "Backbone" 
    }, 
    "validation": { 
     deps: ["backbone"], 
     exports: "Backbone.Validation" 
    }, 
    "wreqr": { 
     deps: ["backbone", "underscore"], 
     exports: "Backbone.Wreqr" 
    }, 
    "marionette": { 
     deps: ["backbone", "babysitter", "wreqr"], 
     exports: "Backbone.Marionette" 
    }, 
    "localStorage": { 
     deps: ["backbone"], 
     exports: "Backbone.LocalStorage" 
    } 
} 
});

一旦你有了這個，你將能夠wreqr 使用還有一個絕招在你的腳本，你寫事實define(['backbone', 'marionette'],function(Backbone, Marionette){ 有點令人不安，因爲你永遠不會知道在你的實現中使用Backbone或Marionette是否有意或無意。我的意思是，與骨幹和牽線木偶有關的命名空間是Backbone和Marionette;我建議你將骨幹別名爲骨幹和木偶作爲木偶，如下所示： define(['backbone', 'marionette'],function(backbone, marionette){。這樣做，您將能夠檢查您的模塊是否已按照RequireJS的要求下載。

然後，一旦墊片已經創建，您的第一塊碼看起來應該是這樣

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

來源

2015-02-26 15:23:46 zobidafly

Backbone EventAggregator問題和問題

回答

相關問題