0

app-router 要素を使用して画面上のコンポーネントを置き換えようとしていますが、何もレンダリングされません。以下、詳細です。

「 my-element.html 」には 2 つの主要な要素があります。1 つはサイドバーで、もう 1 つはメインパネルです。ルートに基づいて、メイン パネルを適切な要素に置き換えたい。ただし、要素をレンダリングするのではなく、URL を変更します。

助けてください

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

1 に答える 1