动态实例化，添加聚合物元素飞镖

Question

尝试动态添加聚合物元素 点击事件无法添加元素

尝试使用 initPolymer（导致堆栈错误：元素已初始化）

4 个文件。

item.html

<polymer-element name="init-item" >
  <template>
    <input type="image" src="button_minus_red.gif" on-click="{{remove}}">
    {{Name}}

  </template>

  <script type="application/dart" src="item.dart"></script>
</polymer-element>

item.dart：

import 'package:polymer/polymer.dart';

@CustomTag('init-item')
class Item extends PolymerElement{
  @observable String Name='hello';
  void remove(){
    Name='';
  }
  PlayerItem.created(): super.created(){}
}

index.dart：

      import 'package:polymer/polymer.dart';
        import 'item.dart'

        // getting unused warning for item.dart

        main() async{....
    //init moved to main
    initPolymer().then((_) {});
    }

//adding to form element on click event
Code to run(click event)
{   //onReady added here
    Polymer.onReady.then((_) { yourPlayer.children.add(new Element.tag('player-item')) ;});

        }

添加到 index.html 的标签以及如上所示的动态添加。

由于上述更改，页面重新加载时会自动包含自定义元素。 从 index.html 中移除元素 按预期工作（没有错误）

上一个错误： 使用 initPolymer 时 添加元素代替标签，也在表单中。 在表单中添加后续点击事件但堆栈错误（初始化已完成）

由于异步（高度错误）是否有任何问题？我应该如何处理？

Answer 1

item 不是有效的聚合物或自定义元素名称。要求自定义元素的名称中必须包含破折号，例如 my-item。

在您问题的顶部，您写了一个点击事件，但底部的代码示例显示您是从main() 执行此操作的。 这两件事是完全不同的。 如果您在 Polymer 元素的单击处理程序中调用代码，它应该可以正常工作。 如果您有自定义 main，则需要确保在实例化元素之前正确初始化 Polymer。

更多详情请见https://stackoverflow.com/a/20982658/217408。

import "package:polymer/polymer.dart";

main() {
  initPolymer().then((zone) => zone.run(() {
    Polymer.onReady.then((_) {  
      var yourPlayer = querySelector('#people');
      yourPlayer.children.add(new Element.tag('player-item'));
    });
  }));
}