在 Dart 中扩展 dart:html 类“ButtonElement”答案

【问题标题】：Extending dart:html class "ButtonElement" in Dart在 Dart 中扩展 dart:html 类“ButtonElement”
【发布时间】：2014-07-04 14:08:52
【问题描述】：

我尝试扩展<button>，但到目前为止没有成功。我究竟做错了什么。我正在使用 Dart 编辑器+SDK 1.5.2 在 pubspec.yaml 中，Polymer 的版本设置为：

polymer: ">=0.11.0 <0.12.0"

index.html

<!DOCTYPE html>

<html>
  <head>
    <!-- <script src="packages/web_components/platform.js"></script>
         not necessary anymore with Polymer >= 0.14.0 -->
    <script src="packages/web_components/dart_support.js"></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Extended Button - Dart v1.5.2</title>

    <!--Extended Button-->     
    <link rel="import" href="view/ext_button.html" />                            

  </head>
  <body>

      <button is="ext-button">Test Button</button>                    

    <script type="application/dart">export "package:polymer/init.dart";</script>
  </body>
</html>

查看/ext_button.dart

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

@CustomTag("ext-button")
class ExtButton extends ButtonElement {    

  ExtButton.created() : super.created();

  factory ExtButton(){    
    onClick.listen(clicked);
  }

  void clicked(MouseEvent e){
    print("Ext-Button clicked");
  }
}

查看/ext_button.html

<!DOCTYPE html>
<link rel="import" href="packages/polymer/polymer.html">

<polymer-element name="ext-button" extends="button">
  <template>    
  </template>
  <script type="application/dart" src="ext_button.dart"></script>
</polymer-element>

所以上面的代码不起作用，但只要像下面这样编写它（只是为了验证 ext 按钮是否有效），它就会告诉我以下内容： "web/index.html:20:7: 自定义元素 "ext-button" 扩展自 "button"，但此标签不会包含 "button" 的默认属性。要解决这个问题，要么将此标记写为<button is="ext-button">，要么从自定义元素声明中删除“extends”属性。”

<ext-button>Test Button</ext-button>

所以有点困惑 ;-) 我认为修复很简单 - 但我只是没有看到问题 ;-(

【问题讨论】：

标签： html dart dart-polymer

【解决方案1】：

仅供参考，以上两件事解决了问题。这是更新的部分，现在可以使用了。

查看/ext_button.dart

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

@CustomTag("ext-button")
class ExtButton extends ButtonElement with Polymer {    

  ExtButton.created() : super.created()
  {
     polymerCreated();
     onClick.listen(clicked);
  }

  void clicked(MouseEvent e){
    print("Ext-Button clicked");
  }
}

查看/ext_button.html

<!DOCTYPE html>
<link rel="import" href="packages/polymer/polymer.html">

<polymer-element name="ext-button" extends="button">
  <template> 
<content></content>   
  </template>
  <script type="application/dart" src="ext_button.dart"></script>
</polymer-element>

【讨论】：

【解决方案2】：

据我所知，您缺少两件事：

在自定义元素构造函数中调用polymerCreated()。
和extends ButtonElement with Polymer

已经有类似的问题了。稍后我有更多时间时会查找它们。也许你在此期间自己找到了它们。如果需要，请添加带有链接的评论。

【讨论】：