如何从Polymer Dart中触发自定义事件？ [英] How do I fire a custom event from Polymer Dart?

问题描述

我想从Polymer元素内部启动/发送/发送自定义事件。例如，我想将一个正常的DOM事件，如changed转换为一个更像语义的事件，如todoupdated。

I want to fire/send/emit a custom event from inside a Polymer element. For example, I want to convert a normal DOM event like "changed" to a more semantic event like "todoupdated".

这是我有的HTML： p>

This is the HTML that I have:

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

我想要更改事件复选框冒泡自定义元素作为更多...有用。 ：）

I want the change events on checkbox to bubble out of the custom element as something more... useful. :)

推荐答案

步骤1

< input> 。请注意下面的变更。

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

步骤2

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

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.

调度自定义事件。 p>

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.

在父级自订元素中侦听自订事件。

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>

请注意 on-todochange 的使用。

享受！

这篇关于如何从Polymer Dart中触发自定义事件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！