Question

我正在创建我的第一个聚合物应用程序/示例，而简单的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中定义的其他元素的数据（例如单选按钮或复选框）。 / p>

Answer 1

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

Answer 2

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

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

按钮点击聚合物飞镖不起作用;需要聚合物元素

2 个答案: