Order of lifecycle events in Polymer.dart

Question

I have a problem with differences in order of lifecycle events in Polymer.dart

Events happen in different order when dart code is run in Dartium and when compiled JavaScript is run in Chrome.

I have 2 Polymer elements: Parent and Child and I added output in created and enteredView functions.

The output is: Dartium:

ChildElement created
ChildElement enteredView. Variable value: InitMsg
ParentElement created
ParentElement enteredView

Chrome:

ChildElement created
ParentElement created
ParentElement enteredView
ChildElement enteredView. Variable value: InitMsg

The questions are:

• is this result completely arbitrary, or is there some order that can be relied upon?
• if a variable is assigned in Parent's created method, new value it is obviously not visible in Child's enteredView. I need to do some calculations based on new value. Is PathObserver in child the only solution to get notified of this assignment, or is there some moment in time/lifecycle callback happening after Parent's created() when this value is visible in child?

My code:

parentelement.dart:

import 'package:polymer/polymer.dart';

@CustomTag('parent-element')
class ParentElement extends PolymerElement {
  @observable String msg = "InitMsg";

  ParentElement.created() : super.created() {
    print('Parent created');
    msg = "Changed msg";
  }

  @override
    void enteredView() {
      super.enteredView();
      print('ParentElement enteredView');     
    }


}

parentelement.html

<link rel="import" href="childelement.html">

<polymer-element name="parent-element">
  <template>    
    <div>      
      <span>Parent Msg: {{msg}}</span>
    </div>
    <child-element msg="{{msg}}"></child-element>    
  </template>
  <script type="application/dart" src="parentelement.dart"></script>
</polymer-element>

childelement.dart:

import 'package:polymer/polymer.dart';

@CustomTag('child-element')
class ChildElement extends PolymerElement {
  @published String msg;

 ChildElement.created() : super.created() {
   print('ChildElement created');
 }

 @override
 void enteredView() {
   super.enteredView();
   print('ChildElement enteredView. Variable value: $msg');     
 }
}

childelement.html

<polymer-element name="child-element">
  <template>    
    <div>      
      <span>Child msg: {{msg}}</span>
    </div>
  </template>
  <script type="application/dart" src="childelement.dart"></script>
</polymer-element>

Answer 1

The created constructor is not suitable if you want rely on the order they are called. As far as I know the polymerCreated callback should be a better fit for you requirement.

I don' really know because enteredView attached fulfilled all my requirements and I therefore never used something else (entereView attached even provides two different slots for own code: 'before super.attached()' and 'after super.attached()')

Answer 2

I had a similar problem and described it in a blog post ( http://www.roberthartung.de/animatr-gui-structure-nesting-polymer-elements/ ). The trick for me was to put the <link rel="import">-statements not in a central place, but into the custom elements itself. My App only has one import for my custom GUI element. The GUI imports its direct custom child elements and so on.

Hope this helps Robert