🥇 Ouvintes de eventos personalizados no Polymer Dart

É simples ouvir um evento em um elemento personalizado no Polymer:

<my-element on-buttonclicked='{{doAction}}'></my-element>

E my-element.dart :

clicked(Event e) {
    e.preventDefault();
    dispatchEvent(new CustomEvent('buttonclicked', detail:  { 'this': 'that', 'and': 'this' });
}

Em seguida, no arquivo code-behind:

doAction(Event e, var detail, Node target) {
    ...
}

Mas o que acontecerá se seu code-behind estiver em outro lugar na hierarquia DOM e você adicionar my-element programaticamente? Você não pode vincular usando um atributo, então a primeira coisa que você tenta é:

var element = new Element.tag('my-element');
document.body.append(element);
element.addEventListener('buttonclicked', doAction);

Não vá, estou com medo. Você precisa importar dart: async e usar um EventStreamProvider assim:

static const EventStreamProvider<CustomEvent> buttonClickedEvent = 
  const EventStreamProvider<CustomEvent>("buttonclicked");

Stream<CustomEvent> get onButtonClicked =>  MyElement.buttonClickedEvent.forTarget(this);

Em seguida, anexar seu evento ao seu elemento torna-se um caso de:

var element = new Element.tag('my-element');
document.body.append(element);
element.onButtonClicked.listen((e) => doAction(e));

Related Posts