Programmatisch erzeugen Polymer-Elemente in Dart

Question

Benötigen Polymer-Dropdown-Menü in DOM hinzufügen. Ich versuche, diesen 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; 
    } 

Und fügen Sie Knoten in PaperListbox dann 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); 

Es ist derzeit nicht:

Wie es getan werden kann?

Update: Hinzugefügt Gist https://gist.github.com/Rasarts/a0b6710e234ec8b4aa37f90e4cd14839

Answer 1

Sie PaperDropDownMenu und Paperlistbox mit new Xxx() schaffen kann, keine Notwendigkeit für new dom.Element.tag('Xxx'), da diese Elemente einen Konstruktor für die Bequemlichkeit enthalten, wo dies bereits getan wird

• 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

Ich denke, das Problem liegt daran, dass Sie nicht die Polymer-DOM-API verwenden. Siehe auch https://github.com/dart-lang/polymer-dart/wiki/local-dom. Nur wenn Sie das vollständige Schatten-DOM aktivieren (mit vollständigen Polyfüllungen ohne native Unterstützung), müssen Sie diese API nicht verwenden.

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

Answer 2

Ja, ich habe es falsch. Beispiel geholfen. Vielen Dank. https://github.com/bwu-dart-playground/polymer1/blob/12a4bca9c5c5b21c690af0bd4451407b64899a6e/so36689312_programmatically_create_paper_elements/web/pdm_element.dart#L36-L36