39483

Custom elements not detecting children when instantiated in template of another custom element

Question:

I have an RPG Main HTML Element defined as follows. I'm instantiating it in the body of my index.html file.

<link rel="import" href="packages/polymer/polymer.html"> <link rel="import" href="gridlayout.html"> <link rel="import" href="gridtile.html"> <polymer-element name="rpg-main" attributes=""> <template> <style> grid-tile { background: #FF00FF; width: 50px; height: 50px } :host { position: absolute; display: block; width: 500px; height: 500px; } </style> <grid-layout rows = "2" cols = "2" spacing = "50px"> <grid-tile> </grid-tile> <grid-tile> </grid-tile> <grid-tile> </grid-tile> <grid-tile> </grid-tile> </grid-layout> </template> <script type="application/dart" src="rpgmain.dart"></script> </polymer-element>

As one would expect, I also have grid-layout and grid-tile elements defined. In the constructor for the grid-layout, I am trying to reference its children. But the element thinks it has 0 children when it is instantiated in the above rpg-main class.

import 'package:polymer/polymer.dart'; import 'dart:html'; @CustomTag('grid-layout') class GridLayout extends PolymerElement { @published int rows; @published int cols; @published int spacing; String _px = "px"; String _perc = "%"; GridLayout.created() : super.created() { print("NUM CHILDREN " + this.children.length.toString()); /** for (int i = 0; i <= this.rows + this.cols - 2; i++) { Element child = this.children[i]; this.children[i].style.margin = this._parseNum(spacing); child.style.float = "right"; if (i % this.rows == this.rows) { child.style.clear = "right"; } }**/ } num _parseString(String s) { print(s.toString()); return num.parse(s.split(_px)[0]); } String _parseNum(num n) { return n.toString() + _px; } }

***The above code prints "NUM CHILDREN: 0"

It's only being instantiated in my rpg-main element, so I'm surprised it wouldn't recognize the grid-tiles as children. Could it be because the grid-layout element is being instantiated in the template tag of an rpg-main custom element? (So maybe grid-layout doesn't consider its children to be in the 'light dom'?) That would be a shame, but if so, what would the workaround be?

Answer1:

The constructor is just the wrong place. You need to allow the elements to properly initialize before using them.

Try

<pre class="lang-dart prettyprint-override">@override void attached() { super.attached(); print("NUM CHILDREN " + this.children.length.toString()); }

see also Justins answer here <a href="https://stackoverflow.com/questions/24468984" rel="nofollow">When is shadowRoot available to a polymer component?</a>

Recommend

  • Drawing Isometric Tilemaps
  • How to cast UInt to SInt value in Chisel3?
  • OpenLayers: How to re-align mouse coordinates and vector layers after fluid css rendering of map div
  • 'Enemy' was not declared in this scope?
  • How to delete a newline using \\b
  • How to start server for Selenium grid Java Maven setup
  • jParallax trouble
  • Symfony2 redirect to https route fails (uses wrong port)
  • Allocating a 2D contiguous array within a function
  • Android NFC read Tags issue. Activity starts each time on data received
  • openssl handshake failed
  • PostgreSQL 9.x - pg_read_binary_file & inserting files into bytea
  • How to resolve docker host names (/etc/hosts) in containers
  • Making header act like google chrome mobile app address bar
  • Responsive left sidebar open close
  • Prevent page break in text block with iText, XMLWorker
  • Dynamically load css stylesheet and wait for it to load
  • C++ friend class std::vector
  • SyntaxError: (irb):26: both block arg and actual block given
  • WPF version of .ScaleControl?
  • Android Activity.onWindowFocusChanged doesn't get called from within TabHost
  • D3 get axis values on zoom event
  • Blackberry - Custom EditField Cursor
  • OpenGL 3.3 on Mac OSX El Capitan with LWJGL
  • Google Custom Search with transparent background
  • Android fill_parent issue
  • Body moving without any force applied? (Box2d)
  • Repeat a vertical line on every page in Report Builder / SSRS
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • How to set/get protobuf's extension field in Go?
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • How to show dropdown in excel using jrxml (jasper api)?
  • ActionScript 2 vs ActionScript 3 performance
  • To display the title for the current loaction in map in iphone
  • align graphs with different xlab
  • Traverse Array and Display in markup
  • How to set the response of a form post action to a iframe source?
  • need help with bizarre java.net.HttpURLConnection behavior
  • Android Google Maps API OnLocationChanged only called once
  • jQuery Masonry / Isotope and fluid images: Momentary overlap on window resize