3

我创建了一个 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”字符串输出，但事实并非如此。以这种方式创建的构造函数是否被忽略了，或者我错过了什么？

4

2 回答 2

11

最新版本的 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() - 在创建组件后稍微调用。

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

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

remove() - 每当从 DOM 中删除组件时调用

于 2012-12-19T16:01:20.943 回答
1

在类中添加以下方法：

created() {
   items.add("Hello");
 }
于 2012-12-19T15:50:49.137 回答