Come registrarsi per eventi personalizzati in Dart utilizzando l'API dei nuovi stream

Question

Sto tentando di registrarmi per un CustomEvent (https://developer.mozilla.org/en-US/docs/DOM/Event/CustomEvent) in Dart. Il vecchio codice per questo era:

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

La nuova API di streaming ha cambiato il modo in cui si registra per gli eventi. Come ti registri per CustomEvents usando la nuova API?

Answer 1

L'idea è che gli eventi personalizzati vengano dichiarati e utilizzati allo stesso modo degli eventi incorporati.

Così, per un evento personalizzato, faresti qualcosa sulla falsariga di:

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

Poi per l'ascolto di esso su elementi:

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

Questo otterrà più pulita una volta elemento sottoclassi è supportato e gli eventi vengono normalmente attivati ​​direttamente sul loro elemento e quando la sottoclasse degli eventi consente tipi di eventi più utili per eventi personalizzati.

Abbiamo discusso di mantenere un'API window.on['foo'].listen(...), ma stiamo cercando di scoraggiare gli accessori di stringhe, poiché per alcuni eventi li inseriamo in polifibre su diversi nomi di eventi.

Ecco un esempio più completo:

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); 
}