Как мне свободно соединить javascript на странице и javascript в диалоге модального интерфейса / jQuery UI? - PullRequest
Новая
       24

Как мне свободно соединить javascript на странице и javascript в диалоге модального интерфейса / jQuery UI?

1 голос
/ 27 января 2011

У меня есть страница, на которой пользователи нажимают кнопку «Добавить человека». При этом появляется модал, загруженный через ajax и отображаемый с помощью jQuery UI Dialog. Всплывающее окно содержит форму поиска, где пользователи выбирают человека, которого нужно добавить. Когда они нажимают «ОК», я бы хотел, чтобы JavaScript на странице извлекал идентификатор выбранного человека и отображал его на странице, которая вызвала модал.

Это все хорошо, и я могу заставить его работать, но это неизменно уродливо, и я в конечном итоге пишу код в моем модальном представлении или в моем просмотре страницы, что требует знания DOM в другом. Например, модал может знать, что на странице вызова есть div#new-person, и он может поместить туда нового человека. Но для этого необходимо, чтобы модал знал о базовой странице.

Или я мог бы передать функцию javascript из кода приложения в модал, но это потребовало бы, чтобы модал знал об этой функции и вызывал ее явно. jQuery UI Dialog предлагает возможность создавать кнопки с onclick, указанными на базовой странице, но мой модальный режим более сложен (я не хочу, чтобы эти кнопки отображались, пока человек не выбран), поэтому я не могу используйте их.

1 Ответ

1 голос
/ 27 января 2011

у меня есть класс 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'} );
  }


}
...