CODEWITHSUNDEEP
dartpolymer
Vitaliy Vostrikov
Vitaliy Vostrikov

Reputation: 631

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:

enter image description here

How it can be done?

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

Upvotes: 3

Views: 297

Answers (2)

Vitaliy Vostrikov
Vitaliy Vostrikov

Reputation: 631

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

Upvotes: 1

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657058

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

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);

Upvotes: 3

Related Questions