Question

我尝试将自定义事件处理程序绑定到具有通过getter公开的EventStreamProvider的WebComponent，但它返回“ Class'DivElement'没有实例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”自定义事件由在此“list”组件中实例化的组件调度。

从上面的示例中我可以看到，如果我在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(...);

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

1 个答案: