0

私は、ページ上に完全にまたは個別に存在できる複数のコンポーネントで構成された、より大きな Web アプリに取り組んでいます。親の AppView 要素は、イベントの委任のために存在する必要があります。

イベント委任の設定方法は次のとおりです。

//inside controlsView.js
appView.view.trigger('eventOccured');

...

//later on in controlsView.js
$(document).on('eventOccured', appView.view, function(){
    controlsView.doSomething();
});


//inside ChartView.js
$(document).on('eventOccured', appView.view, function(){
    chartView.doSomething();
});

appView、controlsView、および chartView は個別の .js ファイルですが、グローバルな appView 変数を使用しても、他の .js ファイルはトリガーされたイベントを検出しません。appView.view (アプリが内部にある親 HTML 要素の jQuery オブジェクト) でカスタム イベントをトリガー/検出しようとしている方法に問題がありますか?

実際のコード例は次のとおりです。

//*************** controlsView.js
$(document).ready(function() { 

    var controlsView = {
        initialize: function(){
            var self = this;
            console.log('hi');
        }
    }

    $(document).on('loadControls', appView.view, function(){
        console.log('hi');
        controlsView.initialize();
    });
});

//*************** appView.js
$(document).ready(function() { 
    appView = {
        initialize: function(){
            appView.view = $('#interactiveChartContainer');
            if ($('#graphControls').length){
                appView.view.trigger('loadControls');
            }
        }
    }

    //if the containing element is missing, don't bother loading the rest of the app
    if (!($('#interactiveChartContainer').length)){
        return;
    } else {

        //only run this app if the right element exists on the page.
        appView.initialize();

    }

});
4

1 に答える 1

1

コードをいくつかの異なるスクリプトに分割する場合、一方が他方に依存している場合、それらが正しい順序になっていることを確認する必要があります。たとえば、あるイベントにバインドし、別のイベントがイベントをトリガーする場合、イベントがすぐに発生する場合は、イベントにバインドされているものを最初に含める必要があります。そうしないと、イベント ハンドラーが開始される前にイベントが発生します。場所。

于 2013-10-15T18:28:54.617 に答える