Construction and ordering of nested and template if= style polymer dart elements? -


code very small app illustrating these multiple constructor calls on github @ https://github.com/chiba-city/testnest.

i trying figure out

  1. why polymer element constructed twice ,
  2. what determines order of construction of polymer elements contain other polymer elements ,
  3. why "templated out" element using "if" template constructed @ all.

also, if 1 cannot reproduce these results 3 simple polymer elements, 1 defined contain or nest other two, love know well.

i finding duplicate constructor calls , constructor ordering peculiarities. here explanation of occurrence of these peculiarities.

i have simple "app". there index.html file html-includes file of custom element definitions , declares 1 custom polymer-dart element in body. here relevant portions of index.html file. have elided customary boiler plate.

<!-- index.html --> <!-- in head --> <link rel="import" href="icapp.html"> <!-- boiler plate polymer/init.dart , ../dart.js stuff here -->  <!-- contents of body tag --> <icount-app></icount-app> 

now in "icapp.html" define 2 elements consisting of h3 labels. contain these 2 elements in template third element begins simple h1 label. here code 3 elements.

<!-- icapp.html --> <!-- user stats list --> <polymer-element name="icount-statlist" >   <template><h3>my stats</h3></template> </polymer-element>  <!-- find stats --> <polymer-element name="icount-findstats" >   <template><h3>find new stats</h3></template> </polymer-element>  <!-- element contains other 2 elements in template --> <polymer-element name="icount-app">  <template>   <h1>icount.us</h1> <!-- simple h1 heading -->    <!-- included -->   <icount-findstats></icount-findstats>    <!-- included conditionally - can never true -->   <template if="{{false}}">     <icount-statlist ></icount-statlist>   </template> <!-- end icount-app template --> </template> <!-- code element definitions --> <script type="application/dart" src="icapp.dart"></script> </polymer-element> 

i have put "print" statements in ".created() : super.created" constructors overriden "enteredview()" methods determine order , frequency of these calls. here output during execution. have added notes prefixed "--"

-- note first, although conditional on {{false}} icountstatlist: created            -- containing element constructed icountapp: created                 -- notice enteredview happens before nested element icountapp: enteredview -- notice element constructed twice icountfindstats: created           icountfindstats: created icountfindstats: enteredview 

the output of application expected (h1 , h3 tags, latter non-conditionally included "icount-findstats" element). how arrives here peculiar, , in ways seem defy adding reasonable program logic these tags (properties, event handlers , on).

  1. the visible nested element constructed twice
  2. the "templated out" nested element constructed once
  3. the visible nested element's "enteredview" method called (not surprisingly).

above contained visible element constructed after containing element. simple experimentation shows this ordering seems arbitrary, or @ least, not dependent on templating or ordering of nested elements.

if switch our preference nested element "template out" following output instead.

icountstatlist: created icountstatlist: created icountstatlist: enteredview icountapp: created icountapp: enteredview icountfindstats: created 

here can note:

  1. the visible nested element, time icount-statlist, constructed twice, above, created before containing element. html output h3 tag occurs once.

  2. this visible nested element's "enteredview" method called prior containing element.

  3. the "templated out" nested element again created (just once), after containing element.

further experimentation shows same element non-conditionally, visibly nested twice results in 4 constructor calls (for element).

another experiment shows same element conditionally contained twice results in 2 constructor calls (for element).

experimenting reordering "templated out" element , visible element reveals no change in log output, i.e., order or frequency of constructor calls.

needless say, perplexed.

  • why visible nested element constructed twice ?

  • why "templated out" nested element constructed at all ?

  • why 1 nested element constructed before containing element , other after ?

  • why containing element, icount-app, not constructed twice?

  • how can containing element sensibly set properties of contained elements given nature , ordering of custom polymer element (object) construction?

any appreciated.

note

  • enteredview changed attached
  • leftview detached

-------

i tried code , can't reproduce things mentioned.

this output got when run app:

nest-a: created nest-a: enterview nest-container: created nest-container: enteredview nest-b: created nest-b: enteredview 
  • the nested nest-b not instantiated @ (the output nest-b outside <template if="{{false}}">

after changing false true get

nest-a: created nest-a: enterview nest-container: created nest-container: enteredview nest-b: created nest-b: enteredview nest-b: created nest-b: enteredview 

you need put value in quotes ="{{false}}" instead of ={{false}} worked expected anyway because evaluated false fail other values/expressions

  • i don't know if construction order settled. there still discussion whether should constucted inside out or document order. if use binding isn't issue

can please post output got app published github repo?


Comments

Popular posts from this blog

user interface - How to replace the Python logo in a Tkinter-based Python GUI app? -

objective c - Greedy NSProgressIndicator Allocation -

how to set an OCR language in Google Drive -