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

Question

我尝试将自定义事件处理程序绑定(bind)到 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”自定义事件由在此“列表”组件中实例化的组件分派(dispatch)。

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

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

那可能吗？

2013 年 5 月 5 日更新:
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”语法:您可能发现了一个错误/缺失的功能 =)。目前，如果我们确定目标对应于一个组件，我们以一种特殊的方式处理属性并将它们的值绑定(bind)到组件的字段。我们为值绑定(bind)执行此操作，但尚未为绑定(bind)自定义事件执行此操作。添加此功能之前的解决方法是查询您的元素并手动附加事件:

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