如何在Dart中创建自定义元素？ [英] How do I create a custom element in dart?

问题描述

我正在尝试在飞镖中创建自定义元素。它应该只包含2个按钮。它从未真正通过构建过程完成...我在做什么错了？

I am trying to make a custom element in dart. It should simply contain 2 buttons. It never actually makes it through the construction process...what am I doing wrong?

class GraphButton extends Element {
  factory GraphButton() => new Element.tag('GraphButton');
  ButtonElement colorBtn;
  ButtonElement removeBtn;

  GraphButton.created() : super.created() {

  }

  void setup(String buttonText) {
    text = buttonText;
    //initialize color btn
    colorBtn
      ..id = 'colorBtn' + text
      ..text = "colorSelector"
      ..onClick.listen(
          (var e) => querySelector('#output').text = id + 'button clicked!');

//initialize remove button
    removeBtn
      ..id = 'removeBtn' + text
      ..text = 'X'
      ..onClick.listen(
          (var e) => this.remove());

  //add to DOM
  this.children
  ..add(colorBtn)
  ..add(removeBtn);
  }
}

推荐答案

有代码中有一些问题。

• 自定义元素需要遵循命名规则，即它们必须具有 -以他们的名字命名


• 需要注册该元素，浏览器才能实例化它们


• 未调用您添加的 setup（...）方法，因此未在按钮上添加标题


• 需要自定义元素扩展 HtmlElement

• Custom elements need to follow the naming rules that they need to have a - in their name
• The element needs to be registered in order for the browser to be able to instantiate them
• The setup(...) method you added wasn't called, therefore not caption was added to the button
• Custom elements need to extend HtmlElement

DartPad示例

另请参见：

• 在以下位置注册自定义元素Dart lang


• Dart自定义元素中的extendTag

• Registering custom element in Dart lang
• extendTag in Dart custom element

这篇关于如何在Dart中创建自定义元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！