Как добавить элемент во время выполнения в пользовательский полимерный элемент с помощью Dart?

Я пытаюсь создать 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> 

и файл дротика выглядит следующим образом:

@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") возвращает нулевой элемент.


person Tusshu    schedule 27.08.2013    source источник


Ответы (2)


Вам нужно использовать следующий код для доступа к вашему элементу div:

DivElement d = $['mydiv'];
person Cengiz    schedule 13.12.2013

необходимо добавить новый элемент в ShadowRoot

DivElement d =  this.shadowRoot.query("#mydiv");
person Tusshu    schedule 27.08.2013