3

モジュールの読み込みにrequire.jsを使用し、アプリケーションの構造化と機能を支援するためにマリオネットを使用してバックボーンアプリを構築しています。次のように、イベントアグリゲーターの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分-doh！）。基本的に、モジュールの初期化イベントにリスナーを追加するのは時期尚早でした (私が知る限り)。関数のチェーンに沿ってそれらをさらに移動したところ、すべてが期待どおりに動作するようになりました.

4

2 に答える 2

1

RequireJSの使用には、いくつかのクリーンなモジュールも含まれます... Backbone.Wreqr.EventAggregatorは、 Marionette.jsの一部であるモジュールです(記録として、Derrick Bailey は、他の誰かによって作成されたこのモジュールを彼のライブラリ内に配置しました。Backbone についても同じことが言えます) 。 .BabySitter ) RequireJS を使用すると、ライブラリによってエクスポートされたものを表示するように制限されます。この場合、Marionette の場合、マリオネットを実際に backbone.babysitter、backbone.wreqr、および marionette を含む 3 つのモジュールに分割するのが最善の方法だと思います。次に、モジュールごとにシムを作成する必要があります

私はこれを使いました

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 を backbone に、Marionette を 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-26T15:23:46.423 に答える