我正在开发一个更大的 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();
}
});