当在另一个自定义元素的模板中实例化时，自定义元素不检测子元素 [英] Custom elements not detecting children when instantiated in template of another custom element

问题描述

我有一个RPG主HTML元素定义如下。我在我的index.html文件的正文中实例化它。

 < link rel =importhref =packages / polymer / polymer.html> 
< link rel =importhref =gridlayout.html> 
< link rel =importhref =gridtile.html> 
 
 
< polymer-element name =rpg-mainattributes => 
< template> 
< style> 
 grid-tile {
 background：＃FF00FF; 
 width：50px; 
 height：50px 
} 
：host {
 position：absolute; 
 display：block; 
 width：500px; 
 height：500px; 
} 
 
< / style> 
< grid-layout rows =2cols =2spacing =50px> 
< grid-tile> 
< / grid-tile> 
< grid-tile> 
< / grid-tile> 
< grid-tile> 
< / grid-tile> 
< grid-tile> 
< / grid-tile> 
< / grid-layout> 
< / template> 
< script type =application / dartsrc =rpgmain.dart>< / script> 
< / polymer-element> 
  

正如人们所期望的，我还定义了grid-layout和grid-tile元素。在网格布局的构造函数中，我试图引用它的孩子。但是当它在上面的rpg-main类中被实例化时，元素认为它有0个孩子。

  import'package：polymer /聚合物
 import'dart：html'; 
 
 @CustomTag（'grid-layout'）
类GridLayout扩展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 ++）{
元素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; 
} 
} 
  

***上述代码打印NUM CHILDREN： 0

它只是在我的rpg-main元素中实例化，所以我很惊讶它不会识别网格瓷砖作为孩子。可能是因为grid-layout元素正在rpg-main自定义元素的模板标签中实例化？ （那么也许网格布局不认为它的孩子在'光dom'？）这将是一个耻辱，但如果是，解决方法是什么？

解决方案

构造函数只是错误的地方。

请尝试

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


另请参见Justins answer here 什么时候shadowRoot可用于聚合物组件？

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?

解决方案

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

Try

@override
void attached() {
  super.attached();
  print("NUM CHILDREN " + this.children.length.toString());
}

see also Justins answer here When is shadowRoot available to a polymer component?

这篇关于当在另一个自定义元素的模板中实例化时，自定义元素不检测子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！