如何让 WebComponent 类调用我的自定义构造函数？

Question

我创建了一个 WebComponent，并为它创建了一个构造函数。运行时，似乎没有调用此构造函数，尽管其余组件都可以工作，但它们必须在我的自定义构造函数之外创建。这是我所说的一个例子。

<element name="x-navigation" constructor="Navigation" extends="div">
    <template>
        <div>{{items}}</div>
    </template>
    <script type="application/dart">
        import 'package:web_ui/web_ui.dart';

        class Navigation extends WebComponent {
          List<String> items = new List<String>();
          Navigation() {
              items.add("Hello");
          }
        }
    </script>
<element>

如果我包含这个组件，输出将是一个空列表，就好像我创建的构造函数没有被调用一样。至少应该有“Hello”字符串输出，但事实并非如此。以这种方式创建的构造函数是否被忽略了，还是我遗漏了什么？

Answer 1

在类中添加以下方法：

created() {
   items.add("Hello");
 }

Answer 2

最新版的Web UI现在调用构造函数，还有created生命周期方法供你使用。

以下代码添加了两个hello：

<element name="x-navigation" constructor="Navigation" extends="div">
  <template>
    <div>{{items}}</div>
  </template>

  <script type="application/dart">
    import 'package:web_ui/web_ui.dart';

    class Navigation extends WebComponent {
      List<String> items = new List<String>();

      Navigation() {
        items.add("Hello first");
      }

      created() {
        items.add("Hello second");
      }
    }
  </script>
<element>

我推荐阅读生命周期方法的文章：http://www.dartlang.org/articles/dart-web-components/spec.html#lifecycle-methods

生命周期方法

created() - 在创建组件后稍微调用。

inserted() - 每当将组件添加到 DOM 时调用。

attributeChanged() - 每当组件中的属性更改时调用。

removed() - 每当从 DOM 中移除组件时调用