如何让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

最新版本的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中删除组件时调用