Как вы регистрируетесь для пользовательских событий в Dart, используя новый API потоков

Ответ 1

Идея состоит в том, что пользовательские события объявляются и используются так же, как и встроенные события.

Итак, для пользовательского события вы делаете что-то в строках:

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

Затем для прослушивания на элементах:

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

Это станет более чистым, если подкласс элемента будет поддерживаться, а события обычно запускаются непосредственно на их элементе, а при подклассе событий - более полезные типы событий для пользовательских событий.

Мы обсуждали сохранение API window.on['foo'].listen(...), но пытаемся препятствовать аксессуарам строк, так как для некоторых событий мы polyfill их для разных имен событий.

Вот более полный пример:

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