如何将对象引用传递给飞镖聚合物元素中的事件处理程序

Question

我可以将字符串属性和对象引用传递给事件处理程序吗？

来自https://github.com/sethladd/dart-polymer-dart-examples 的 gwt_contacts 示例：

contacts_view.html：

<div id="contact-list">
  <template repeat="{{contacts}}">
    <div>
      <input type="checkbox">
      <span on-click="selectContact" data-id="{{id}}">{{name}}</span>
    </div>
  </template>
</div>

contacts_view.dart 中的处理程序

void selectContact(MouseEvent event, var detail, SpanElement target) {
  String id = target.attributes["data-id"];
  selectedContact = contacts.firstWhere((Contact contact) => contact.id == id);
}

如何传递联系人参考而不是 ID？

类似问题：How do I pass arbitrary data to a click event handler function from a Dart polymer web component

更改：

在 Christophe Herreman 的提示下，我添加了一个新元素：

html:

<polymer-element name="contact-view-item">
  <template>
    <span on-click="select">{{contact.name}}</span>
  </template>
</polymer-element>

飞镖：

@CustomTag("contact-view-item")
class ContactViewItem extends PolymerElement {
  @observable @published Contact contact;

  void select(MouseEvent event, var detail, var target) {
    dispatchEvent(new CustomEvent("contactselected", detail: contact));
  }
}

并将列表更改为：

<div id="contact-list">
  <template repeat="{{contact in contacts}}">
    <div>
      <input type="checkbox">
      <contact-view-item contact="{{contact}}" on-contactselected="contactSelectedHandler"></contact-view-item>
    </div>
  </template>
</div>

并将处理程序添加到 ContactsView：

void contactSelectedHandler(CustomEvent event) {
  selectedContact = event.detail;
}

但是调度自定义事件会抛出错误：

Uncaught Error: unsupported object type for conversion
Exception: unsupported object type for conversion
undefined (undefined:0:0)

连接似乎很好，因为如果我不将联系人作为详细信息传递，则将调用contactSelectedHandler，但详细信息 - 当然 - 为空。

Answer 1

我认为这在 HTML 定义中是不可能的。当您从元素类分派对象时，您可以在CustomEvent 的detail 属性中分派对象。注意detail 属性实际上只是对event.detail 的引用，当事件是CustomEvent 时。如果不是，detail 属性为空。

组件定义

<div id="contact-list">
  <template repeat="{{contacts}}">
    <div>
      <input type="checkbox">
      <span on-click="contact_clickHandler" data-id="{{id}}">{{name}}</span>
    </div>
  </template>
</div>

void contact_clickHandler(MouseEvent event, var detail, SpanElement target) {
  String id = target.attributes["data-id"];
  Contact contact = contacts.firstWhere((Contact c) => c.id == id);
  dispatchEvent(new CustomEvent("contactselected", detail: selectedContact));
}

组件使用

<contact-list on-contactselected="contactList_contactSelectedHandler"></contact-list>

void contactList_contactSelectedHandler(CustomEvent event) {
  var contact = event.detail;
  // do something with selected contact
}