Programmatically create polymer Elements in Dart

问题

Need add polymer paper-dropdown-menu in DOM. I try this code:

    makePapersElements() {
      List _items = new List();

      for (var i = 0; i < 13; i++) {
        PaperItem item = new dom.Element.tag('paper-item');
        item.text = i;

        _items.add(item);
      }

      return _items;
    }

And add nodes in PaperListbox then in PaperDropdownMenu:

    List<PaperItem> items = makePapersElements();

    var element = new dom.Element.tag('div');

    PaperDropdownMenu dropMenu = new PaperDropdownMenu();
    PaperListbox listBox = new dom.Element.tag('paper-listbox');


    dropMenu.append(listBox);
    listBox.nodes.addAll(items);

    element.nodes.add(dropMenu);

    $['example'].nodes.add(element);

It's not work currently:

How it can be done?

Update: Added Gist https://gist.github.com/Rasarts/a0b6710e234ec8b4aa37f90e4cd14839

回答1:

You can create PaperDropDownMenu and Paperlistbox with new Xxx(), no need for new dom.Element.tag('Xxx') because these elements contain a constructor for convenience where this is done already

https://github.com/dart-lang/polymer_elements/blob/7912e0e6641155505007a89140f11c25db14e3f8/lib/paper_listbox.dart#L61
https://github.com/dart-lang/polymer_elements/blob/7912e0e6641155505007a89140f11c25db14e3f8/lib/paper_dropdown_menu.dart#L69

I guess the issue is because you don't use the Polymer DOM API. See also https://github.com/dart-lang/polymer-dart/wiki/local-dom. Only when you enable full shadow DOM (with full polyfills whithout native support) then you don't need to use this API.

makePapersElements() {
  List _items = new List();

  for (var i = 0; i < 13; i++) {
    PaperItem item = new PaperItem();
    item.text = i;

    _items.add(item);
  }

  return _items;
}

List<PaperItem> items = makePapersElements();

var element = new dom.Element.tag('div');

PaperDropdownMenu dropMenu = new PaperDropdownMenu();
PaperListbox listBox = new PaperListbox();


Polymer.dom(dropMenu).append(listBox);

// not sure this will work 
Polymer.dom(listBox).childNodes.addAll(items);

// alternatively
var listboxDom = Polymer.dom(listBox);
for(var item in items) {
  listboxDom.append(item);
}

Polymer.dom(this)appen(dropMenu);
// ro Polymer.dom(this.root)appen(dropMenu);


Polymer.dom($['example']).append(element);

回答2:

Yes, I do it wrong. Example helped. Thanks. https://github.com/bwu-dart-playground/polymer1/blob/12a4bca9c5c5b21c690af0bd4451407b64899a6e/so36689312_programmatically_create_paper_elements/web/pdm_element.dart#L36-L36

来源：https://stackoverflow.com/questions/36689312/programmatically-create-polymer-elements-in-dart

标签

dart

polymer