11

子要素がカスタム イベントをディスパッチし、親要素がそれをリッスンして何らかのアクションを実行するようにします。Polymer を使用する場合、これを行うにはどうすればよいですか?

4

1 に答える 1

14

次のように、ポリマー要素からカスタム イベントをディスパッチできます。

dispatchEvent(new CustomEvent('nameOfEvent'));

次に、親要素は次のようにカスタム イベントをリッスンできます。

<child-element on-childspeaks="fireAway"></child-element>

これがどのように機能するかを示すより完全な例を次に示します。まず、子要素のコードは次のとおりです。

<!DOCTYPE html>

<polymer-element name="child-element">
  <template>
    <div on-click="dispatch">I am a child</div>
  </template>
  <script type="application/dart">
    import 'dart:html';
    import 'package:polymer/polymer.dart';

    @CustomTag('child-element')
    class ChildElement extends PolymerElement with ObservableMixin {

      dispatch(Event e, var detail, Node sender) {
        print('dispatching from child');
        dispatchEvent(new CustomEvent('childspeaks'));
      }
    }
  </script>
</polymer-element>

親要素のコードは次のとおりです。

<!DOCTYPE html>
<link rel="import" href="child_element.html">
<polymer-element name="parent-element">
  <template>
    <div>I am the parent</div>
    <child-element on-childspeaks="fireAway"></child-element>
  </template>
  <script type="application/dart">
    import 'dart:html';
    import 'package:polymer/polymer.dart';

    @CustomTag('parent-element')
    class ParentElement extends PolymerElement with ObservableMixin {

      void fireAway() {
        window.alert('The child spoke, I hear');
      }
    }
  </script>
</polymer-element>
于 2013-09-26T23:11:40.250 に答える