使用 Dart Web UI WebComponents 时是否可以以声明方式绑定 CustomEvent 处理程序？

Question

我尝试将自定义事件处理程序绑定到 WebComponent，该 WebComponent 具有通过 getter 公开的 EventStreamProvider，但它返回“Class 'DivElement' has no instance getter 'onMainAction'。 ”。

精简了组件 .dart 代码...

import 'dart:html';
import 'dart:async';
import 'package:web_ui/web_ui.dart';

class SegmentedButtonsListComponent extends WebComponent {
  static const EventStreamProvider<CustomEvent> mainActionEvent = const EventStreamProvider<CustomEvent>("MainActionEvent");
  Stream<CustomEvent> get onMainAction => mainActionEvent.forTarget(this);
}

组件的修剪使用…

<x-segmented-buttons-list id="segmented-buttons-list" on-main-action="eventHandler($event)"></x-segmented-buttons-list>

从 main.dart 中修剪的代码...

import 'dart:html';
import 'dart:async';
import 'package:web_ui/web_ui.dart';

const EventStreamProvider<CustomEvent> mainActionEvent = const EventStreamProvider<CustomEvent>("MainActionEvent");

void eventHandler(CustomEvent event) {
  print("""
    Yabba Dabba Doo!
    Type: ${event.type}
    Detail: ${event.detail}
  """);
}

void main() {
  mainActionEvent.forTarget(query('#segmented-buttons-list')).listen(eventHandler);
}

“MainActionEvent”自定义事件正在由在此“列表”组件中实例化的组件分派。

从上面的示例中可以看出，如果我在 main.dart 中创建一个 EventStreamProvider 并以组件为目标，我可以捕获事件，这可以正常工作（但绕过组件中的 Stream getter）。

如果我可以省去 main.dart 中的 EventStreamProvider 并简单地绑定到组件上的 onMainEvent getter，那就太好了。

这可能吗？

2013-05-05 更新： Siggi 在下面解释说，目前不可能这样做，但是有一种方法可以通过元素的 xtag 引用组件的 CustomEventProvider 的 getter。 我发现在 main() 完成后我必须使用 Timer 来查询 DOM，因为在 main() 事件循环完成之前不会填充 xtags。

void postMainSetup() {
  query('#segmented-buttons-list').xtag.onMainAction.listen(eventHandler);
}

void main() {
  Timer.run(postMainSetup);
}

通过上述设置，不需要新的 CustomEventProvider 来监控组件。

Answer 1

好问题！

我看到了这个问题的几个部分：

• 直接在组件上使用自定义事件：目前 web_ui 使用不同的对象来表示您的组件和它所表示的实际 dom 元素。将来，我们计划直接从“DivElement”而不是“WebComponent”扩展，这样您就可以做自己写的事情。

  同时，当您想要使用组件的主机或影子根时，您必须更加明确。在您的示例中，您似乎想将事件附加到主机，因此您需要编写更像这样的内容：

  Stream<CustomEvent> get onMainAction => mainActionEvent.forTarget(this.host);

• 在组件中使用“on-someting-foo”语法：您可能发现了一个错误/缺少的功能 =)。目前，如果我们确定目标对应于一个组件，我们以一种特殊的方式处理属性并将它们的值绑定到组件的字段。我们为值绑定执行此操作，但尚未为绑定自定义事件执行此操作。添加此功能之前的解决方法是查询您的元素并手动附加事件：

  query('#host-node').xtag.onMainAction.listen(...);