Question

我试图扩展<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-button的工作原理），它就会告诉我以下内容：＆＃34; web / index.html:20：7：自定义元素＆＃34; ext-button＆＃34;从＆＃34;按钮＆＃34;延伸，但此标记不包含＆＃34;按钮＆＃34;的默认属性。要解决此问题，请将此标记写为<button is="ext-button">或删除＆＃34; extends＆＃34;来自自定义元素声明的属性。＆＃34;

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

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

Answer 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>

Answer 2

据我所知，你遗漏了两件事：

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

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

扩展dart：html类＆＃34; ButtonElement＆＃34;在达特

2 个答案: