以编程方式创建特殊的Polymer-Element

时间:2013-09-23 13:56:01

标签: custom-controls dart polymer dart-polymer

我有一个带有以下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'])));

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

2 个答案:

答案 0 :(得分:10)

从聚合物0.8.5开始,您可以使用

之类的构造函数
new Element.tag('tag-bar');

此外,不再有.xtag而且没有.host(主机==现在这个)

积分转到Seth Ladd ,他在聚合物邮件列表上解释了这一点

答案 1 :(得分:3)

注意:这仅适用于polymer.dart&lt; 0.8.5。请参阅新方法的其他答案。

自定义元素实际上没有像我们在Dart中熟悉它们的构造函数。相反,试试这个:

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

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