événements jQuery: notifier les éléments nouvellement créés des événements passés

Question

par exemple le code:

var Events = $({}); 

Events.on('myCustomEvent', function(){ console.log('myCustomEvent 1') }) 

Events.trigger('myCustomEvent'); // I want notify the previous binds and all binds in future 

$.ajax({...}).success(function(res){ 
    Events.on('myCustomEvent', function(){ console.log('myCustomEvent 2') }) 
}); 

// when ajax or other long process will be finished 'myCustomEvent' must be fired 

« myCustomEvent 1 » sera imprimé parce que son binded déclencheur avant appelé et « myCustomEvent 2 » doit être trigged trop

Y a-t-il des solutions dans jQuery?

Answer 1

On dirait que ce que vous voulez, ce n'est pas tant des événements que d'un pub/sous-système, ou du code qui implémente le pattern Observer. La plupart de ces implémentations n'ont pas la possibilité d'appeler des abonnés de manière rétroactive, après la publication d'un message. Je l'ai fait, mais vous devez faire attention à ce que quiconque utilise le système sache qu'un message peut être publié plusieurs fois. Malheureusement, je ne peux pas partager le code, puisqu'il appartient à mon employeur.

La simple recherche de "pattern d'observateur en JavaScript" ou "pubsub en JavaScript" vous donnera une bonne bibliothèque. Généralement, ils utilisent un hachage d'un "sujet" pour un tableau de fonctions qui sont appelées lorsque ce sujet est publié. L'astuce consiste à garder également un historique de quand la publication est appelée. Lorsque quelqu'un s'abonne à un sujet déjà publié, republiez ce sujet.

Espérons que ce soit suffisant pour vous aider à démarrer.

Answer 2

Je pense que la solution est un .Callbacks $

Callbacks.highlight = $.Callbacks('memory') 

// ComponentB 
$(window).hashchange(function(){ 

    $.ajax({ /* load items of #ListB */ }).success(function(data){ 

     /* append items to dom */ 

     if (/listA=123/.test(location.hash)) 
      Callbacks.highlight.fire(); 
    }) 

    $('#ListB').on('click', 'a', function(){ /* highlight the same in #ListA by alg2 */ }) 
}) 

// ComponentA 
$(window).hashchange(function(){ 

    $.ajax({ /* load items of #ListA */ }).success(function(data){ 

     /* append items to dom */ 
     Callbacks.highlight.add(/* highlight item */) 
    }) 

    $('#ListA').on('click', 'a', function(){ /* highlight the same in #ListB by alg1 */ }) 
})