Javascript Event Dispatcher

Einführung

Mit dem Event Dispatcher können Javascript-Komponenten (Widget, Funktionen, etc.) miteinander gekoppelt werden, ohne dass diese direkt von einander wissen. Die Koppelung erfolgt über Events und den Event Dispatcher. Die Javascript-Komponenten interagieren nur mit dem Event Dispatcher und nicht direkt miteinander. Durch diese Entkoppelung können Komponenten hinzugefügt oder ausgetauscht werden ohne dass andere Komponenten angepasst werden müssen.

Der erforderlichen Libraries für den Event Dispatcher sind:

• js/jquery/jquery.min.js
• js/ecms.core.js

Callback Registrierung

Die Registrierung einer Callback-Funktion für einen Event erfolgt über die " register" Methode des Event Dispatchers.

ecms.eventDispatcher.register(String eventLabel, Function callback [, Object parameters]);

Im ersten Parameter " eventLabel" wird das Label des Events übergeben, zu dem die Callback-Funktion ausgeführt werden soll.

Der zweite Parameter ist die Callback-Funktion.

Im dritten Parameter " parameter" können Parameter für die Callback-Funkiton übergeben werden. Dieser Parameter ist optional.

Beispiel für eine Callback-Registrierung ohne Parameter:

ecms.eventDispatcher.register('ecs.basket.updated', function(event){...});

Beispiel für eine Callback-Registrierung mit Parametern:

ecms.eventDispatcher.register('ecs.basket.product_add', function(event){...}, {'new_item_class': 'item-add-new', ...});

Event Trigger

Ein Event kann über die " trigger" Methode des Event Dispatchers ausgelöst werden.

ecms.eventDispatcher.trigger(String eventLabel[, Object data, Object targetElement]);

Wie bei der Registrierung wird im ersten Parameter " eventLabel" wird das Label des Events übergeben, der ausgeführt werden soll.

Im zweiten Parameter " data" können Daten an die Callback-Funktionen übergeben werden. Dieser Parameter ist optional.

Der dritte Paremeter " targetElement" ist das DOM Element von dem der Event ausgelöst wird. Damit erhalten die Callback-Funktionen einen Back-Pointer auf das Trigger-Element. Dieser Parameter ist optional.

Beispiel für einen Event-Trigger ohne Daten und ohne Target-Element:

ecms.eventDispatcher.trigger('ecs.basket.updated');

Beispiel für einen Event-Trigger mit Daten aber ohne Target-Elemenet:

ecms.eventDispatcher.trigger('ecs.basket.product_add', {'pcode': 'MEIN-PCODE', ...});

Beispiel für einen Event-Trigger mit Daten und Target-Elemenet:

ecms.eventDispatcher.trigger('ecs.search.input_update', {'value': $(this).val()}, this);

Callback Funktion

Den Callback-Funktion wird bei der Event-Ausführung vom Event Dispatcher ein Object-Parameter übergeben. In diesem Parameter stehen alle Daten und Objekte des Event zur Verfügung.

function event_dispatcher_callback(event)
	{
	    // Variable mit dem Event-Label
	    event.label;
 
	    // Variable mit den Event-Parametern aus dem register-Aufruf. Object oder NULL
	    event.params;
 
	    // Variable mit den Event-Daten aus dem trigger-Aufruf. Object oder NULL
	    event.data;
 
	    // Back-Pointer auf das Target-Element aus dem trigger-Aufruf. Object oder NULL
	    // Target-Element ist in der Callback-Funktion auch über "this" Variable verfügbar
	    event.target;    
	    this;
 
	    // Funktion stoppt Dispatcher-Ablauf. Nachfolgende Event-Callbacks werden nicht mehr aufgerufen!
	    event.stopDispatcher();
 
	    // Funktion meldet Fehler an Dispatcher. Dispatcher-Ablauf wird nicht gestoppt.
	    // Fehler-Status und Meldung werden im Result der trigger-Funktion zurück gegeben.
	    event.setError("message text");
	}