Send event from parent to child element in polymer.dart

Question

I am trying to fire an event from a polymer element, and listen for that event in an element that is inside of it.

These are the four files of consequence:

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');
  }

}

When I click the paper-button, the event trigger correctly, but it is not being received by the canvas-container at all. Any insight into the problem is appreciated

Answer 1

The Polymer documentation has a section about this topic https://www.polymer-project.org/0.5/articles/communication.html#sending-messages-to-siblingschildren

Subscribe to the event on the parent and re-fire it on each child.