atotic / excess-router

Express-style routing for Polymer
37 stars 10 forks source link

Rendering problem with excess-router #23

Closed shivchawla closed 8 years ago

shivchawla commented 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>
atotic commented 8 years ago

Soirry, can't help you with this.