将 Polymer paper-dropdown-menu 添加到来自 javascript 的页面？

Question

我正在尝试从 JavaScript 添加 paper-dropdown-menu 到我的页面。但是，当我这样做时，它最终会在页面上出现格式错误 - 列表项默认显示并且不会折叠回列表中。

这是纸质下拉菜单的基本结构，所以看起来我需要创建 3 个相互嵌套的元素，然后将其附加到我的目标 div...

<paper-dropdown-menu label="Type">
 <paper-menu class="dropdown-content">
  <paper-item>Test</paper-item>
 </paper-menu>
</paper-dropdown-menu>

为此，我到目前为止写了这个：

index.html

<paper-button id="AddList" on-tap="_addList">Add List</paper-button>
<div id="ListGoesHere"></div>

app.js

app._addList() = function(e) {
  // creating the dropdown container
  var elDropdown = document.createElement('paper-dropdown-menu');
  elDropdown.label = 'Type';

  // creating the paper-menu to go inside the paper-dropdown-menu
  var elMenu = document.createElement('paper-menu');
  elMenu.id = 'ProjectType';
  elMenu.className = 'dropdown-content';

  // creating one item (option)
  var elItem = document.createElement('paper-item');
  elItem.value = 'test';
  elItem.innerHTML = 'Test';

  // nesting the item inside of the menu
  elMenu.appendChild(elItem);

  // nesting the menu inside the dropdown
  elDropdown.appendChild(elMenu);

  // attaching the new dropdown element to the page/DOM
  document.querySelector('#ListGoesHere').appendChild(elDropdown);
};

它似乎没有正确嵌套这些元素 - 纸质菜单出现在纸质下拉菜单元素之外，并且在单击纸质下拉菜单时根本没有反应。我对其他 Polymer 元素（例如 paper-inputs 和 paper-textareas）做了类似的事情，它们按预期工作。下拉元素有什么different/special吗？

Answer 1

我认为这不是向聚合物 dom 动态添加元素的好方法，这仍然无法正常渲染并且绑定不起作用。

我认为实现这个的正确方法是制作下拉菜单列表并创建 dom-repeat 模板，这是更简单的方法。

<template is="dom-repeat" items="{{dropMenus}}">
   <paper-dropdown-menu label="Type">

       <paper-menu class="dropdown-content">
          <template is="dom-repeat" items="{{item}}">
            <paper-item>{{item}}</paper-item>
          </template>
        </paper-menu>

   </paper-dropdown-menu>
  </template>

并使用 push 方法附加到 itemsArray 项目

  this.set('dropMenus',[['item1','item2'],['item1','item2'],['item1','item2']]);

或者如果您使用应用程序

  app.set('dropMenus',[['item1','item2'],['item1','item2'],['item1','item2']]);

将 Polymer paper-dropdown-menu 添加到来自 javascript 的页面？

Add a Polymer paper-dropdown-menu to a page from javascript?

javascript

polymer-1.0