聚合物飞镖中的按钮单击不起作用；需要聚合物元素答案

【问题标题】：Button click in polymer dart does not work; needs polymer-element聚合物飞镖中的按钮单击不起作用；需要聚合物元素
【发布时间】：2013-08-31 22:37:13
【问题描述】：

我正在创建我的第一个聚合物应用程序/示例，但一个简单的 button on-click 不起作用。该方法未被调用。我想使用一个简单的按钮而不创建新的聚合物元素（注释代码）。如果我使用聚合物元素中的按钮，它们就可以正常工作。

<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8">
    <title>Button</title>
    <link rel="stylesheet" href="button.css">
     <script src="packages/polymer/boot.js"></script>
  </head>
  <body>
    <h1>Button</h1>

   <template id="tmpl" bind>
     <button  on-click="myMethod">Click me!</button><!! DOES NOT WORK!!! -->
     </template> 
     <!--
   <polymer-element name="my-element" extends="div">
      <template>
        <p>
          <button on-click="myMethod">Show Message</button>
          <button on-click="myMethod">Hide Message</button>
        </p>
      </template>   
    </polymer-element>

    <my-element id="test"></my-element>-->

    <script type="application/dart" src="button.dart"></script>       
  </body>
</html>

import 'dart:html';
import 'package:polymer/polymer.dart';

void main() {
  query("#tmpl").model = new MyClass();
}

@CustomTag('my-element')
class MyClass extends PolymerElement with ObservableMixin{

  @observable String name="testname";

  void myMethod(var e, var detail, var target) {
    print("button works");
  }
}

编辑：我刚刚意识到我的按钮从聚合物元素调用的myMethod 无法访问模板tmpl 中定义的其他元素的数据（例如单选按钮或复选框）。

【问题讨论】：

标签： dart polymer

【解决方案1】：

是的，on-* 属性仅适用于 Polymer 元素。

【讨论】：

好的，但是我如何在不同的聚合物元素之间共享数据或应用程序状态？如果polymer-element1 将某个初始化值从x 更改为z，则polymer-element2 再次仅读取x。
消息传递是一个很好的方法。触发事件和/或响应属性更改。 polymer-project.org/articles/communication.html

【解决方案2】：

您可以创建自定义元素 dart-button 并使用自定义属性来设置 onclick 方法。 As I used it in this demo for onblur

您可以在应该合作的控件之间共享一个模型，并在该模型中保持控件状态。然后您可以访问其他控件状态。

【讨论】：