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 回答