How do I get WebComponent classes to invoke my custom constructor?

Question

I created a WebComponent where I created a constructor for it. When run, this constructor does not seem to be invoked, though the rest of the components work, but they have to be created outside my custom constructor. Here is an example of what I'm talking about.

<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>

If I include this component, the output will be an empty list, as if the constructor I created has not been called. There should be at least the "Hello" string output, but it isn't. Are constructors created this way ignored, or have I missed something?

This happened to me, too, so I opened a bug to request more feedback from the compiler when it notices we accidentally do this: https://github.com/dart-lang/web-ui/issues/272 — Seth Ladd, Dec 19 '12 at 18:30
@SeathLadd That's a good idea, as it threw me for quiet a while. — James Hurford, Dec 20 '12 at 09:14

score 11 · Accepted Answer · edited Jun 20 '20 at 09:12

The latest version of Web UI now calls the constructor, and there is also the created lifecycle method available for you.

The following code is adding both hello's:

<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>

I recommend reading the article on lifecycle methods: http://www.dartlang.org/articles/dart-web-components/spec.html#lifecycle-methods

Lifecycle methods

created() - Invoked slightly after a component is created.

inserted() - Invoked whenever a component is added to the DOM.

attributeChanged() - Invoked whenever an attribute in the component changes.

removed() - Invoked whenever a component is removed from the DOM

@JamesHurford I believe it's because they need to do some processing before they let you run your initialization code. If you look at the `out` directory and the compiled source code, it seems this is the case. — Kai Sellgren, Dec 19 '12 at 18:05
Kai Sellgren is this still the case with the constructor? I was able to create a constructor from a class that extended WebComponent. — adam-singer, May 06 '13 at 04:52

score 1 · Answer 2 · answered Dec 19 '12 at 15:50

1

Add following method in class:

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

answered Dec 19 '12 at 15:50

Tusshu

1,664
3
16
32

How do I get WebComponent classes to invoke my custom constructor?

2 Answers2

Lifecycle methods

Linked