Question

尝试动态添加聚合物元素在click事件上无法添加元素

尝试使用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元素的click处理程序中调用代码，它应该可以工作。如果您有自定义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'));
    });
  }));
}

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

1 个答案: