2

我尝试将自定义事件处理程序绑定到 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);
}

削减了组件的使用……</p> 

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

从 main.dart 中修剪的代码...</p> 

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 来监视组件。

4

1 回答 1

3

好问题！

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

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

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

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

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

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

于 2013-05-03T22:00:23.943 回答