Wie registrieren Sie benutzerdefinierte Ereignisse in Dart mit der neuen Streams API

Question

Ich versuche, für ein CustomEvent (https://developer.mozilla.org/en-US/docs/DOM/Event/CustomEvent) in Dart zu registrieren. Der alte Code dafür war:

window.on['foo'].add((e) => print(e.detail)); 

Die neue Streams API, um die Art und Weise geändert hat Sie für Ereignisse registrieren. Wie registrieren Sie sich für CustomEvents mit der neuen API?

Answer 1

Die Idee ist, dass benutzerdefinierte Ereignisse wie integrierte Ereignisse deklariert und verwendet werden.

Also für ein benutzerdefiniertes Ereignis, würden Sie etwas entlang der Linien von tun:

class DataGenerator { 
    static EventStreamProvider<Event> dataEvent = new EventStreamProvider('data'); 
} 

Dann gilt für auf Elemente, um es zu hören:

DataGenerator.dataEvent.forTarget(element).listen(...); 

Dies wird sauberer erhalten, sobald Element Subklassifizieren ist unterstützt und Ereignisse werden normalerweise direkt auf ihr Element ausgelöst, und wenn Ereignis-Unterklassen sinnvollere Ereignistypen für benutzerdefinierte Ereignisse zulassen.

Wir sprachen über eine window.on['foo'].listen(...) API zu halten, sondern versuchen, die Zeichenfolge Accessoren als für einige Ereignisse entmutigen wir sie auf verschiedene Ereignisnamen POLYfill.

Hier ist ein vollständigeres Beispiel:

import "dart:html"; 

DivElement dartDiv; 

main() { 
    dartDiv = query("#dartDiv"); 

    // Add a button to generate a CustomEvent called CustomDartEvent. 
    var customEventStreamProvider = new EventStreamProvider<CustomEvent>("CustomDartEvent"); 
    var customEventButton = new ButtonElement() 
    ..text = "Generate custom Dart event" 
    ..classes.add("gwt-Button") // For consistency 
    ..onClick.listen((e) { 
     var detail = { 
     "n": 8, 
     "s": "Hello from Dart", 
     "obj": { 
      "hello": "from Dart"   
     } 
     }; 
     var event = new CustomEvent("CustomDartEvent", 
      canBubble: false, cancelable: false, detail: detail); 
     window.dispatchEvent(event); 
    }); 
    dartDiv.children.add(customEventButton); 

    // Listen for CustomEvents called CustomDartEvent. 
    customEventStreamProvider.forTarget(window).listen((e) { 
    printString(""" 
     Received CustomDartEvent: 
     type: ${e.type}, 
     detail: ${e.detail} 
    """); 
    }); 
} 

void printString(String s) { 
    var div = new DivElement() 
    ..text = s; 
    dartDiv.children.add(div); 
}