如何侦听polymer.dart中从父级传递到子级的事件

Question

我试图传递一个事件从父母到孩子在聚合物1.0.0-rc2在Dart。问题是我不知道该如何去倾听孩子们发生的事情。我尝试过在notation_view.html文件中的dom-模块中放置on-control面板-refire属性，并从那里调用句柄按钮，但是它没有工作。听这件事的正确方式是什么？我知道on-control-panel-button-pressed工作得很好。

notation_view.dart

@PolymerRegister('notation-view')
class NotationView extends PolymerElement {

  NotationView.created() : super.created();

  @reflectable
  handleButton(Event e, var detail) {
    print("received");
  }
}

main_app.dart

@PolymerRegister('main-app')
class MainApp extends PolymerElement {

  MainApp.created() : super.created();

  @reflectable
  refire(Event e, var detail) {
    querySelector('notation-view').dispatchEvent(new CustomEvent("control-panel-refire",
        detail: {'name' : detail["button-id"]}));
  }

main_app.html

<link rel="import" href="notation_view.html">

<dom-module id="main-app">
  <style>
    :host {
      display: block;
    }
  </style>

  <template>
    <notation-view id="notation-view"></notation-view>
    <control-panel id="control-panel" on-control-panel-button-pressed="refire"></control-panel>
  </template>
</dom-module>

notation_view.html

<dom-module id="notation-view" >
    <style>
        :host {
          display: block;
        }
    </style>

    <template>
        <canvas id="canvas" width="1000" height="1000"></canvas>
    </template>

</dom-module>

Answer 1

我还没有试过这个，但我认为

   querySelector('notation-view').dispatchEvent(new CustomEvent("control-panel-refire",
    detail: {'name' : detail["button-id"]})); 
   }

它应该是

   new PolymerDom(root).querySelector('notation-view').fire("control-panel-refire",
    detail: {'name' : detail["button-id"]}));
   }

如果分析器抱怨未知的querySelector()方法，您可以将PolymerElement或NotationView的结果转换为fire()。

若要侦听事件使用

@PolymerRegister('notation-view')
class NotationView extends PolymerElement {

  NotationView.created() : super.created();

  @reflectable
  handleButton(Event e, var detail) {
    print("received");
  }

  @Listen('control-panel-refire')
  void handleControlPanelRefire(CustomEvent e, [_] /* or `Map detail` instead of [_] */) {
    // handle event
  }

  // alternatively
  EventSubscription _controlPanelRefireSubscr;
  attached() {
    super.attached();
    _controlPanelRefireSubscr = this.on['control-panel-refire'].listen((event) {
      // handle event 
    });
  }

  detached() {
    super.detached();
    _controlPanelRefireSubscr?.cancel();
  }
}