Closed shivchawla closed 8 years ago
I have an excess-router inside the element and the idea is to replace a component within an element on routing. The following code doesn't display anything except the sidebar. Please help!
<dom-module id="my-element"> <template> <paper-drawer-panel id="drawerpanel"> <excess-route route="/:view" view="{{viewpage}}"></excess-route> <aq-sidebar menuSelected="{{viewpage}}" drawer narrow="[[narrow]]"></aq-sidebar> <iron-pages selected="" attrForSelected="name"> <partial-editor main narrow="[[narrow]]" name="editor" show-menu='[[showSidebar]]'></partial-editor> <partial-community main narrow="[[narrow]]" name="community" show-menu='[[showSidebar]]'></partial-community> <partial-analyze main narrow="[[narrow]]" name="analyze" show-menu='[[showSidebar]]'></partial-analyze> </iron-pages> </paper-drawer-panel> </template> <script> Polymer({ is:'my-element', listeners: { 'open-menu': 'openMenu', 'close-menu':'closeMenu', 'change-menu': 'menuChanged', }, menuChanged(newMenu) { }, openMenu() { if (this.narrow) { this.$.drawerpanel.openDrawer(); } else { this.showSidebar = true; } }, closeMenu() { this.$.drawerpanel.closeDrawer(); if (this.showSidebar) { this.showSidebar = false; } }, }); </script> </dom-module>
<dom-module id='aq-sidebar'> <template> <paper-header-panel class='sidenav fit'> <paper-menu selected="[[menuSelected]]" attrForSelected="data-panel" iron-select="onSelected"> <paper-icon-item noink data-panel="editor">Editor <iron-icon item-icon icon="vaadin-icons:twin-col-select"></iron-icon> </paper-icon-item> <paper-icon-item data-panel="analyze"> <iron-icon item-icon icon="vaadin-icons:chart"></iron-icon> <span class="item-text">Analyze</span> </paper-icon-item> <paper-icon-item data-panel="community"> <iron-icon item-icon icon="vaadin-icons:group"></iron-icon> <span class="item-text">Community</span> </paper-icon-item> </paper-menu> </paper-header-panel> </template> <script> Polymer({ is: 'aq-sidebar', properties: { menuSelected: { type: String, }, narrow: { type: Boolean, }, }, listeners: { 'iron-select': 'onSelected', }, toggleMenu() { this.fire('close-menu'); }, onSelected() { this.fire('change-menu', {menu : "editor"}) }, }); </script> </dom-module>
Soirry, can't help you with this.
I have an excess-router inside the element and the idea is to replace a component within an element on routing.
The following code doesn't display anything except the sidebar. Please help!