10

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>

チェックボックスの変更イベントをカスタム要素からもっと...便利なものとしてバブルアウトしたい。:)

4

3 に答える 3

30

ステップ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'));
  }

注: カスタム イベント名にダッシュを含めることはできません。

ステップ 4

親カスタム要素でカスタム イベントをリッスンします。

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

の使用に注意してくださいon-todochange。

楽しみ！

于 2013-09-24T01:21:51.893 に答える