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

Question

不仅可以传递字符串属性，还可以传递对事件处理程序的对象引用？

来自gwt_contacts的https://github.com/sethladd/dart-polymer-dart-examples样品

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，那么detail当然是空的。

Answer 1

我认为这在HTML定义中是不可能的。当从元素类分派对象时，可以在CustomEvent的CustomEvent属性中分派对象。注意，当事件是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
}