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

}

当我单击纸张按钮时，事件会正确触发，但帆布容器根本没有接收到它。对此问题的任何见解表示赞赏

Answer 1

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

订阅父母的活动并在每个孩子身上重新启动。

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

1 个答案: