使用Dart Web UI WebComponents时是否可以声明性地绑定CustomEvent处理程序？ [英] Is it possible to declaratively bind a CustomEvent handler when using Dart Web UI WebComponents?

问题描述

我尝试将自定义事件处理程序绑定到具有通过getter公开EventStreamProvider的WebComponent，但是它返回 类'DivElement'没有实例getter'onMainAction'。 。

I've tried to bind a custom event handler to a WebComponent that has an EventStreamProvider exposed via a getter, but it comes back with "Class 'DivElement' has no instance getter 'onMainAction'.".

缩小的.dart代码...

Trimmed down component .dart code...

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整理的代码…

Trimmed code from 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自定义事件由此列表中实例化的组件调度

The "MainActionEvent" custom events are being dispatched by components instantiated within this "list" component.

如上例所示，如果我在main.dart中创建一个EventStreamProvider并将目标定位到该组件，则可以捕获事件，但是效果很好（但

As you can see from the above example I can catch the events if I create an EventStreamProvider in main.dart and target the component, that works fine (but by-passes the Stream getter in the component).

如果我可以免除main.dart中的EventStreamProvider并简单地绑定到onMainEvent getter上，那就太好了

It would be great though if I could dispense with the EventStreamProvider in main.dart and simply bind to the onMainEvent getter on the component.

有可能吗？

更新2013-05-05：
Siggi在下面说明，目前尚无法做到这一点，但是有一种方法可以通过元素的xtag引用组件的CustomEventProvider的getter。
我发现在main（）完成之后，我不得不使用Timer来查询DOM，因为在main（）事件循环完成之前不会填充xtag。

Update 2013-05-05: Siggi explains below that at present it is not possible to do this, but there is a way to reference the component's CustomEventProvider's getter via the element's xtag. I found that I had to use a Timer to query the DOM after main() has completed because xtags aren't populated until the main() event loop has finished.

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

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

使用上述设置，不需要新的CustomEventProvider来监视组件。

With the above setup a new CustomEventProvider isn't needed to monitor the component.

推荐答案

好问题！

我看到了几个部分问题：

I see a couple parts to this question:

• 直接在组件上使用自定义事件：当前，web_ui使用不同的对象来表示您的组件及其实际的dom元素代表。将来，我们计划直接从 DivElement而不是 WebComponent进行扩展，这将使您能够完成编写的工作。

• using custom events directly on a component: Currently web_ui uses different objects to represent your component and the actual dom element it represents. In the future, we plan to extend directly from "DivElement" instead of "WebComponent" and that will allow you to do what you wrote.

同时，您将拥有当您要使用组件的主机或影子根时，可以更加明确。在您的示例中，您似乎想将事件附加到主机，因此您需要编写如下内容：

Meanwhile, you'll have to be more explicit when you want to use the host or shadow root of your component. In your example, it seems like you want to attach the event to the host, so you would need to write something more like this:


Stream< CustomEvent>进入onMainAction => mainActionEvent.forTarget（this.host）;


在组件中使用 on-someting-foo语法：您可能发现了错误/缺失功能=）。当前，如果我们确定目标对应于组件，则我们以特殊的方式对待属性，并将其值绑定到组件的字段。我们对值绑定进行此操作，但尚未对绑定自定义事件进行此操作。添加此功能之前，一种变通方法是查询您的元素并手动附加事件：

using 'on-someting-foo' syntax in a component: you probably found a bug/missing feature =). Currently we treat attributes in a special way and bind their values to fields of a component if we identify that the target was corresponds to a component. We do this for value bindings, but not yet for binding custom events. A workaround before this feature is added, would be to query for your element and attach the event by hand:


query（' ＃host-node'）。xtag.onMainAction.listen（...）;


这篇关于使用Dart Web UI WebComponents时是否可以声明性地绑定CustomEvent处理程序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！