How do I fire a custom event from Polymer Dart?
Step 1
Capture the change events on the <input>. Notice the on-change below.
<!-- from inside todo_item.html --><input type="checkbox" checked="{{item.done}}" on-change="{{change}}">Step 2
Handle the change event in the custom element code that contains the checkbox.
import 'package:polymer/polymer.dart';import 'dart:html';import 'models.dart';@CustomTag('todo-item')class TodoItemElement extends PolymerElement with ObservableMixin { @observable Item item; bool get applyAuthorStyles => true; void change(Event e, var details, Node target) { // do stuff here }}Notice the change event handler. That method is run any time the checkbox state changes.
Step 3
Dispatch a custom event.
void change(Event e, var details, Node target) { dispatchEvent(new CustomEvent('todochange')); }NOTE: the custom event name must not contain dashes.
Step 4
Listen for the custom event in a parent custom element.
<template repeat="{{item in items}}" > <li is="todo-item" class="{{item.doneClass}}" item="{{item}}" on-todochange="todoChanged"></li> </template>Notice the use of on-todochange.
Enjoy!
Polymer has a helper method that simplifies firing events
// dispatch a custom eventthis.fire('polymer-select', detail: {'item': item, 'isSelected': isSelected});Additional info:
To make the event available to subscriber that want to add a listener programmatically
// getterasync.Stream<dom.CustomEvent> get onPolymerSelect => PolymerSelection._onPolymerSelect.forTarget(this);// private EventStreamProviderstatic const dom.EventStreamProvider<dom.CustomEvent> _onPolymerSelect = const dom.EventStreamProvider<dom.CustomEvent>('polymer-select');subscribe to the event programmatically instead of declaratively:
($['#ps'] as PolymerSelect) // get the children and cast it to its actual type .onPolymerSelect.listen((e) => print(e['isSelected'])); // subscribe
I managed this using <core-signals> and the polymer helper method fire. This way you are able to listen to events fired from elements that are not children. source.
todochange.html
<!doctype html><polymer-element name="todo-item" extends="li"> <template> <style> label.done { color: gray; text-decoration: line-through; } </style> <label class="checkbox {{item.doneClass}}"> <input type="checkbox" checked="{{item.done}}"> {{item.text}} </label> </template> <script type="application/dart" src="todo_item.dart"></script></polymer-element>todochange.dart
import 'package:polymer/polymer.dart';import 'dart:html';@CustomTag('todo-item')class TodoItemElement extends PolymerElement { @observable Item item; void change(Event e, var details, Node target) { // the name is the name of your custom event this.fire( "core-signal", detail: { "name": "todochange" } ); }}Then any subscriber just has to do this
subscriber.html
...<link rel="import" href="packages/core_elements/core_signals.html>...<template> <core-signals on-core-signal-todochange="{{handleToDoChange}}"></core-signals>...</template>subscriber.dart
@CustomTag( "subscriber" )class Sub extends PolymerElement { ... void handleToDoChange( Event e, var detail, Node target ) { print( "Got event from <todo-item>" ); } ...}