在 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

Polymer 文档中有一节是关于这个主题的https://www.polymer-project.org/0.5/articles/communication.html#sending-messages-to-siblingschildren

在父项上订阅事件并在每个子项上重新触发。

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

Send event from parent to child element in polymer.dart

dart

dart-polymer