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


i'm trying add paper-dropdown-menu page javascript. however, when way, ends malformed on page - list items display default , not collapse list.

this basic structure of paper-dropdown-menu, looks need create 3 elements nested within each other , append target div...

<paper-dropdown-menu label="type">  <paper-menu class="dropdown-content">   <paper-item>test</paper-item>  </paper-menu> </paper-dropdown-menu> 

to end, wrote far:

index.html

<paper-button id="addlist" on-tap="_addlist">add list</paper-button> <div id="listgoeshere"></div> 

app.js

app._addlist() = function(e) {   // creating dropdown container   var eldropdown = document.createelement('paper-dropdown-menu');   eldropdown.label = 'type';    // creating paper-menu go inside paper-dropdown-menu   var elmenu = document.createelement('paper-menu');   elmenu.id = 'projecttype';   elmenu.classname = 'dropdown-content';    // creating 1 item (option)   var elitem = document.createelement('paper-item');   elitem.value = 'test';   elitem.innerhtml = 'test';    // nesting item inside of menu   elmenu.appendchild(elitem);    // nesting menu inside dropdown   eldropdown.appendchild(elmenu);    // attaching new dropdown element page/dom   document.queryselector('#listgoeshere').appendchild(eldropdown); }; 

it doesn't seem nesting these elements - paper-menu appears outside of paper-dropdown-menu element , not react @ when clicking paper-dropdown-menu. i've done similar things other polymer elements such paper-inputs , paper-textareas , worked expected. there different/special dropdown elements?

i think not way add elements polymer dom dynamically, still not render ok , binding not works.

the right way implement think make list of dropdown menus , create dom-repeat template ,this easier way.

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

and append itemsarray item using push method

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

or if use app

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

Comments

Popular posts from this blog

get url and add instance to a model with prefilled foreign key :django admin -

css - Make div keyboard-scrollable in jQuery Mobile? -

ruby on rails - Seeing duplicate requests handled with Unicorn -