3

String 属性だけでなく、オブジェクト参照もイベント ハンドラーに渡すことはできますか?

https://github.com/sethladd/dart-polymer-dart-examplesからのサンプル gwt_contacts :

contact_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>

contact_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 の代わりに連絡先参照を渡すにはどうすればよいですか?

同様の質問: Dart ポリマー Web コンポーネントからクリック イベント ハンドラー関数に任意のデータを渡すにはどうすればよいですか

かわった：

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)

contact を detail として渡さないと contactSelectedHandler が呼び出されるため、接続は問題ないようですが、detail はもちろん null です。

4

1 に答える 1

2

HTML定義内から宣言的にそれが可能だとは思いません。要素クラスからオブジェクトをディスパッチする場合detail、 a のプロパティでオブジェクトをディスパッチできます。CustomEventプロパティdetailは、実際にはevent.detailイベントがCustomEvent. そうでない場合、detailプロパティは null です。

コンポーネント定義

<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
}
于 2013-10-12T17:33:42.170 に答える