dart - 将事件从父元素发送到polymer.dart中的子元素

Question

我试图从聚合物元素中触发一个事件，并在其内部的元素中监听该事件。

这些是结果的四个文件:

main_app.html

<link rel="import" href="../../packages/paper_elements/paper_input.html">
<link rel="import" href="../../packages/paper_elements/paper_button.html">
<link rel="import" href="canvas_container.html">;

<polymer-element name="main-app">
  <template>
    <paper-button on-click="{{onButtonClicked}}">text</paper-button>

    <canvas-container"></canvas-container>  
  </template>
  <script type="application/dart" src="main_app.dart"></script>
</polymer-element>

main_app.dart

import 'dart:html';

import 'package:polymer/polymer.dart';

@CustomTag('main-app')
class MainApp extends PolymerElement {
  MainApp.created() : super.created();


  onButtonClicked(Event event, var detail, Node sender) {
    print('button clicked');
    fire('test');

  }

  ready() {
    super.ready();
  }


}

canvas_container.html

<polymer-element name="canvas-container">
  <div on-test="{{testAction}}">
    <template>
      <div>
        <canvas id="canvas"></canvas>
      </div>
    </template>
  </div>
  <script type="application/dart" src="canvas_container.dart"></script>
</polymer-element>

canvas_container.dart

import 'dart:html';
import 'package:Compbook/stave.dart';
import 'package:Compbook/clef.dart';
import 'package:polymer/polymer.dart';

@CustomTag('canvas-container')
class CanvasContainer extends PolymerElement {
  CanvasElement canvas;
  CanvasRenderingContext2D context;

  CanvasContainer.created() : super.created();

  ready() {
    this.canvas = $['canvas'];

    canvas.width = 1000;
    canvas.height = 1000;

    context = canvas.context2D;


  testAction(Event e, var detail, Node sender) {
    print('event has been received');
  }

}

当我单击纸张按钮时，事件将正确触发，但是 Canvas 容器根本没有收到该事件。任何对问题的见解都值得赞赏

Answer 1

聚合物文档中有关于此主题的章节https://www.polymer-project.org/0.5/articles/communication.html#sending-messages-to-siblingschildren

在父级上订阅该事件，然后在每个子级上重新触发。