以编程方式创建特殊的聚合物元素答案

【问题标题】：Programmatically create special Polymer-Element以编程方式创建特殊的聚合物元素
【发布时间】：2013-09-23 13:56:00
【问题描述】：

我有一个带有以下 html 的聚合物元素：

<polymer-element name="tab-bar">
  <template>
    <button>Hello</button>
    <template repeat="{{item in items}}">
      <div>This element is {{ item }}</div>
    </template>
  </template>
  <script type="application/dart" src="tab_bar.dart"></script>
</polymer-element>

底层 dart 类如下所示：

import 'package:polymer/polymer.dart';

@CustomTag('tab-bar')
class TabBar extends PolymerElement {
  List items;

  TabBar(List<String> items) {
    this.items = toObservable(items);
  }
}

使用以下方法，无法以编程方式添加元素：

query('body').children.add(createElement(new TabBar(['One','Two','Three'])));

那么现在，如何以编程方式添加这样的聚合物元素并在构造函数中设置列表？

【问题讨论】：

标签： custom-controls dart polymer dart-polymer

【解决方案1】：

从聚合物 0.8.5 开始，您可以使用类似构造函数

new Element.tag('tag-bar');

此外，没有更多的 .xtag 和没有更多的 .host（host == 现在）

致谢Seth Ladd ，他在聚合物邮件列表中对此进行了解释

【讨论】：

我试过使用这段代码，它只将<tag-bar>元素添加到DOM，但它实际上并没有在聚合物元素的模板标签内呈现de HTML，任何关于为什么这样的线索正在发生吗？
Triztian 我也有同样的问题。
啊，我必须先导入我的组件，我忘了。在我的主要 html 中，我必须

【解决方案2】：

注意：这仅适用于 polymer.dart

自定义元素并没有我们在 Dart 中熟悉的构造函数。相反，试试这个：

var tabBar = createElement('tag-bar');
tabBar.xtag.items = toObservable(['a','b','c']);

query('body').children.add(tabBar);

【讨论】：