在Dart中以编程方式创建聚合元素 [英] Programmatically create polymer Elements in Dart

问题描述

需要在DOM中添加聚合物纸张下拉菜单。
我试试这个代码：

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

在PaperListbox中添加节点，然后在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）; 
  

目前不工作：

a href =https://i.stack.imgur.com/u3cP8.png =nofollow noreferrer>

如何做？

更新： Gist
https://gist.github.com/Rasarts/a0b6710e234ec8b4aa37f90e4cd14839 您可以创建 PaperDropDownMenu 和 Paperlistbox code>与新Xxx（），不需要 new dom.Element.tag（'Xxx'） -lang / polymer_elements / blob / 7912e0e6641155505007a89140f11c25db14e3f8 / lib / paper_listbox.dart＃L61rel =nofollow> https://github.com/dart-lang/polymer_elements/blob/7912e0e6641155505007a89140f11c25db14e3f8/lib/paper_listbox.dart#L61 < a>


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

我猜这个问题是因为你不使用Polymer DOM API。另请参见 https://github.com/dart-lang/polymer-dart / wiki / local-dom 。只有当您启用完整的影子DOM（使用完整的polyfills whithout本机支持），您不需要使用此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）; 
 
 //不确定这将工作
 Polymer.dom（listBox）.childNodes.addAll（items）; 
 
 //或者
 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）; 
  

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

解决方案

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

这篇关于在Dart中以编程方式创建聚合元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！