dart - 如何在运行时使用Dart将元素添加到聚合物自定义元素中？

Question

我正在尝试在运行时创建ParagraphElement并将其转换为聚合物组件中的Div元素，如下所示:

<polymer-element name="my-element" extends="div">
  <template>
    <p>
      <button on-click="updateMessage" data-msg="You clicked Show">Show Message</button>
      <button on-click="updateMessage" data-msg="You clicked Hide">Hide Message</button>
      <button on-click="addPelement" >Add P element</button>            
    </p>
    <p id="message">{{ message }}</p> <!-- bind the message -->
    <div id="mydiv"></div>  
  </template>
  <script type="application/dart" src="my_element.dart"></script>
</polymer-element> 

和dart文件如下:

@CustomTag('my-element')
class MyElement extends PolymerElement with ObservableMixin {
  @observable var message;

  void updateMessage(Event e, var detail, Element target) {
    message = target.attributes['data-msg']; // extract the data- attribute
  }

  void addPelement(Event e) {
    var item = new ParagraphElement (); 
    item.text="new p element";
    DivElement d = query("#mydiv");
    d.children.add(item);
  }
}

行查询(“#mydiv”)返回空元素。

Answer 1

您需要使用以下代码访问div元素:

DivElement d = $['mydiv'];