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 回答
9

Polymer 有一个辅助方法，可以简化触发事件

// dispatch a custom event
this.fire('polymer-select', detail: {'item': item, 'isSelected': isSelected});

附加信息：
使想要以编程方式添加侦听器的订阅者可以使用该事件

// getter
async.Stream<dom.CustomEvent> get onPolymerSelect =>
    PolymerSelection._onPolymerSelect.forTarget(this);

// private EventStreamProvider
static const dom.EventStreamProvider<dom.CustomEvent> _onPolymerSelect =
    const dom.EventStreamProvider<dom.CustomEvent>('polymer-select');

以编程方式而不是声明方式订阅事件：

($['#ps'] as PolymerSelect) // get the children and cast it to its actual type
    .onPolymerSelect.listen((e) => print(e['isSelected'])); // subscribe
于 2014-03-15T13:07:12.067 回答
1

我使用<core-signals>和聚合物辅助方法来管理这个fire。通过这种方式，您可以监听非子元素触发的事件。来源。

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" } );
  }
}

然后任何订阅者都必须这样做

订阅者.html

...
<link rel="import" href="packages/core_elements/core_signals.html>
...
<template>
  <core-signals on-core-signal-todochange="{{handleToDoChange}}"></core-signals>
...
</template>

订阅者.dart

@CustomTag( "subscriber" )
class Sub extends PolymerElement {
  ...
  void handleToDoChange( Event e, var detail, Node target ) {
    print( "Got event from <todo-item>" );
  }
  ...
}
于 2015-01-20T11:11:57.330 回答