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!

Leave a Comment