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

问题描述

我正在尝试在 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);
  }
}

推荐答案

您的代码中存在一些问题.

There are a few issues in your code.

• 自定义元素需要遵循命名规则，它们的名称中需要有-
• 需要注册元素，浏览器才能实例化它们
• 未调用您添加的 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

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