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
Post a Comment