Question

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

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

或者我可以将javascript函数从我的应用程序代码传递给模态，但这需要模态知道该函数并显式调用它。 jQuery UI Dialog提供了创建在基页上指定onclick的按钮的功能，但我的模态比这更复杂（我不希望这些按钮出现，直到一个人被选中）所以我可以不要使用它们。

Answer 1

我有一个Callbacks类，我在Js clases之间传递事件

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'} );
  }


}

如何在一个页面和javascript的modal / jQuery UI对话框中松散地连接javascript？

1 个答案: