javascript - 如何松散耦合页面上的 javascript 和模态/jQuery UI 对话框中的 javascript？

Question

我有一个页面，用户可以在其中单击“添加人员”按钮。这会弹出一个通过 ajax 加载并使用 jQuery UI 对话框显示的模式。弹出窗口包含一个搜索表单，用户可以在其中选择要添加的人员。当他们点击“确定”时，我希望页面上的 JavaScript 检索所选人员的 ID 并将其显示在调出模式的页面上。

这一切都很好，我可以让它工作，但它总是很难看，我最终在模态视图或页面 View 中编写代码，这需要了解另一个中的 DOM。例如，模式可以知道调用页面上有一个 div#new-person 并且它可以将新人员放在那里。但这要求模态框了解基本页面。

或者我可以将 JavaScript 函数从我的应用程序代码传递到模式，但这需要模式知道该函数并显式调用它。 jQuery UI 对话框提供了在基页上指定 onclick 创建按钮的能力，但我的模式比这更复杂(我不希望这些按钮在选择一个人之前显示)所以我不能使用它们。

Answer 1

我有一个回调类，我在 Js 类之间传递事件

var Callbacks = {};
Callbacks.triggers = {};

Callbacks.addCallback = function( trigger, instance, method ){

    if( this.triggers[ trigger ] == undefined ){
        this.triggers[ trigger ] = Array( { obj:instance, action:method } );
    }else{
        this.triggers[ trigger ].push( { obj:instance, action:method } );
    };
};

Callbacks.fireCallback = function( trigger, param ){

    if( this.triggers[ trigger ] == undefined ){
        return;
    };

    for (var i=0; i < this.triggers[ trigger ].length; i++) {
        var listener = this.triggers[ trigger ][ i ];

        if( listener.action != undefined ){
            listener.obj[ listener.action ]( param );
        }
    };

};

使用

/// some class to listen to a callback

function ListenClass(){

  this.build = function(){
    Callbacks.addCallback( 'myCallback', this, 'triggerMethod' );
  }

    this.triggerMethod = function( params ){
      alert( params );
    }

    this.build();

}

/// some class firing a callback
 function TriggerClass(){

  this.fire = function(){
  alert( 'fired' );
  Callbacks.fireCallback( 'myCallback', { value:'hey there this is a callback'} );
  }


}