1

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

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

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

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

***以上代码打印“NUM CHILDREN: 0”

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

4

1 回答 1

1

构造函数只是错误的地方。您需要允许元素在使用它们之前正确初始化。

尝试

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

另请参阅 Justins 在这里回答shadowRoot 何时可用于聚合物组件？

于 2014-07-01T06:53:36.107 回答