2012-04-02 12 views
7
var test = { } 
$(test).on("testEvent", function(){ 
    console.log("testEvent has fired"); 
}); 
$.event.trigger("testEvent"); 

Sto provando a utilizzare jQuery per eseguire un meccanismo di pubblicazione/sottoscrizione utilizzando eventi. Devo essere in grado di allegare eventi a oggetti non DOM ed essere in grado di farli sparare da un singolo trigger globale. Mi aspettavo che il codice sopra funzionasse ma non ha provocato l'attivazione testEvent per l'oggetto test.

Si noti che saranno presenti più oggetti a cui un evento verrà sottoscritto. Un singolo $ .event.trigger dovrebbe generare tutti quegli eventi.

Do atto che questo codice funziona bene:

$('#someID').on("testEvent", function() { 
console.log('testEvent has fired from DOM element'); 
}) 
$.event.trigger("testEvent"); 
+0

Il motivo per cui l'evento non viene attivato è perché l'oggetto non fa parte del DOM. Quando sparo $ .event.trigger sta facendo scoppiare l'evento e scoppiando nel DOM. Visto che l'oggetto non fa parte del DOM, non spara. Quello che sto veramente cercando qui è in qualche modo generare eventi all'interno di oggetti non DOM a livello globale usando jQuery. Sto cercando di evitare di dover usare qualcosa come AmplifyJS per realizzare questo. – crv

+2

L'unico modo per attivare l'evento che hai postato è con '$ (test) .trigger (" testEvent ");'. –

+1

Se non si passa un elemento a '$ .event.trigger 'e l'evento che viene attivato non è un evento globale, non innescherà un evento. Vedere il blocco di codice che inizia sulla riga 3104 di http://code.jquery.com/jquery-1.7.2.js. Poiché questo è un metodo non documentato, dobbiamo andare al codice per vedere cosa fa. –

risposta

8

Dopo aver fatto qualche ricerca sembra come se jQuery 1.7 fornisce un modo semplice per introdurre un meccanismo di pubblicazione/sottoscrizione. (Trovati here) Al fine di avere un publish/subscribe meccanismo il seguente codice può essere utilizzato:

(function ($, window, undefined) { 
    var topics = {}; 

    jQuery.Topic = function (id) { 
     var callbacks, method, topic = id && topics[id]; 
     if (!topic) { 
      callbacks = jQuery.Callbacks(); 
      topic = { 
       publish: callbacks.fire, 
       subscribe: callbacks.add, 
       unsubscribe: callbacks.remove 
      }; 
      if (id) { 
       topics[id] = topic; 
      } 
     } 
     return topic; 
    }; 
}) 

Per iscriversi ad un evento seguente è fatto:

$.Topic("message").subscribe(function() { 
    console.log("a publish has occurred"); 
}); 

Per pubblicare un messaggio quanto segue è fatto:

$.Topic("message").publish(data); 

"messaggio" è il nome dell'evento. L'argomento dati contiene tutte le informazioni che vuoi trasmettere agli abbonati.

Per cancellarsi è necessario passare la funzione che è stato sottoscritto:

$.Topic("message").unsubscribe(funcSubscribedToBefore); 
0

nei browser moderni (se ho read the source for Underscore.js destra) consentono di associare gli eventi per non oggetti DOM in modo nativo. Altrimenti, dovrai usare qualcosa come la funzione .bind del carattere di sottolineatura. Quindi dipende da quali browser devi supportare.

Edit:

Ok, non importa, pensavo si legano in Underscore.js è lo stesso che con Backbone. Backbone ha il suo modulo eventi che fa il binding dell'evento, apparentemente.

binding events to dynamic objects in underscore/backbone

+0

e per aggiungere ulteriore danno al danno, Backbone.Events ora utilizza la sintassi "on/off", non è la sintassi precedente bind, ecc. Sapevo che. – JayC

0

Recentemente ho usato l'approccio Ben Alman, e ha funzionato grande!

/* jQuery Tiny Pub/Sub - v0.7 - 10/27/2011 
* http://benalman.com/ 
* Copyright (c) 2011 "Cowboy" Ben Alman; Licensed MIT, GPL */ 

(function ($) { 

    var o = $({}); 

    $.subscribe = function() { 
     o.on.apply(o, arguments); 
    }; 

    $.unsubscribe = function() { 
     o.off.apply(o, arguments); 
    }; 

    $.publish = function() { 
     o.trigger.apply(o, arguments); 
    }; 

}(jQuery)); 

Usage:

$.subscribe('eventName', function (event) { 
    console.log(event.value); 
}); 

$.publish({ type: 'eventName', value: 'hello world' }); 

Vedi https://gist.github.com/addyosmani/1321768 per ulteriori informazioni.

Problemi correlati