Блог

Главная - Вопросы по программированию - Расширение dart: html-класс «ButtonElement» в Dart

Расширение dart: html-класс «ButtonElement» в Dart

#html #dart #dart-polymer

#HTML #dart #dart-полимер

Вопрос:

Я пытался расширить <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");
  }
}

view/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), он сообщает мне следующее:
«web/index.html:20:7: пользовательский элемент «ext-button» расширяется от «button», но этот тег не будет включать свойства «button» по умолчанию. Чтобы исправить это, либо запишите этот тег как <button is="ext-button"> , либо удалите атрибут «extends» из объявления пользовательского элемента.»

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

Так что немного запутался 😉 Я думаю, что исправить легко и просто — но я просто не вижу проблемы;-(

Ответ №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");
  }
}

view/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

Уже есть подобный вопрос. Я посмотрю их позже, когда у меня будет больше времени. Может быть, вы тем временем сами их найдете. Пожалуйста, добавьте комментарий со ссылкой, если вы это сделаете.