应用程序路由器“执行”未渲染：聚合物

Question

I am trying to replace a component on the screen using app-router element but it doesn't render anything. Below are the details.

There are two major elements in " my-element.html ". One is the side bar and other is the main panel. I want to replace the main panel with appropriate element based on the route. However, it doesn't render any element but modifies the url.

Please help

my-element.html

<dom-module id ="my-element">
<template> 

<paper-drawer-panel id="drawerpanel">

  <aq-sidebar></aq-sidebar>

  <app-router div="app-router" mode="hash">
    <app-route path="/editor" import="../layouts/editor.html"></app-route>
    <app-route path="/analyze" import="../layouts/analyze.html"></app-route>
    <app-route path="/community" import="../layouts/community.html"></app-route>
  </app-router> 

</paper-drawer-panel>
</template>
<script>
 Polymer({ is:'my-element',
           listeners: {'change-menu': 'menuChanged',},
           menuChanged(newMenu) { this.$$('app-router').go("/editor", {replace:true});}
        })
</script> </dom-module>

aq-sidebar.html

<dom-module id='aq-sidebar'>
<template>
 <paper-header-panel class='sidenav fit'>
  <paper-toolbar>
    <div class="title">AimsQuant</div>
    <paper-icon-button icon="icons:menu" on-tap="toggleMenu"></paper-icon-button>
  </paper-toolbar>
  <paper-menu attrForSelected="data-panel" iron-select="onSelected">
    <paper-icon-item noink  data-panel="editor">
      <iron-icon item-icon icon="vaadin-icons:twin-col-select"></iron-icon>
      <span class="item-text">Editor</span>
      <!--a is="pushstate-anchor" href="#/editor"></a-->
    </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>

<script> Polymer({
    is: 'aq-sidebar',

    listeners: {
      'iron-select': 'onSelected',
    },

    onSelected() {
      this.fire('change-menu', {menu : this.menuSelected})
    },


  });
  </script>
</dom-module>

Answer 1

First, this import style is strange, I do think that it would be right if you use the iron-selector to switch between the view components that you've made, and import then using the importHref function, also you should use the Set function of polymer to change the path instead of this Go function. like this:

<app-location route="{{ route }}"></app-location>
<app-route route="{{ route }}"
           pattern="/:page"
           data="{{ routeData }}"
           tail="{{ subroute }}"></app-route>

<iron-pages role="main"
            attr-for-selected="route"
            selected="[[ page ]]">
    <my-editor route="editor"></my-editor>
    <my-analyze route="analyze"></my-analyze>
    <my-community route="community"></my-community>
</iron-pages>

<script>
     Polymer({ 
         is:'my-element',
         properties: {
             page: {
                 type: String,
                 notify: true,
                 reflectToAttribute: true,
                 observer: "_pageChanged"
             }
         },

         observers: [
             "_routePageChanged(routeData.page)"
         ],

         _changeRoute: function(e) {
             this.importHref(
                this.resolveUrl("my-" + e.detail.requestRoute), null, null, true);
             this.set("route.path", e.detail.requestRoute);
         },

         _routePageChanged: function(page) {
             this.page = page || "list";
         },
     })
</script>