dart - 如何从 Polymer Dart 触发自定义事件？

Question

我想从 Polymer 元素内部触发/发送/发出自定义事件。例如，我想将像“changed”这样的普通 DOM 事件转换为像“todoupdated”这样的更具语义的事件。

这是我拥有的 HTML:

<polymer-element name="todo-item" extends="li" attributes="item">
  <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>

我希望复选框上的更改事件从自定义元素中冒出来作为更多......有用的东西。 :)

Answer 1

第1步

捕获 <input> 上的更改事件.请注意 on-change以下。

<!-- from inside todo_item.html -->
<input type="checkbox" checked="{{item.done}}" on-change="{{change}}">

第2步

处理包含复选框的自定义元素代码中的更改事件。

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

请注意 change事件处理程序。每当复选框状态发生变化时，就会运行该方法。

第 3 步

调度自定义事件。

  void change(Event e, var details, Node target) {
    dispatchEvent(new CustomEvent('todochange'));
  }

注意:自定义事件名称不得包含破折号。

第四步

监听父自定义元素中的自定义事件。

    <template repeat="{{item in items}}" >
      <li is="todo-item" class="{{item.doneClass}}" item="{{item}}" on-todochange="todoChanged"></li>
    </template>

注意on-todochange的使用.

享受!