app-drawerとapp-headerで同じメニュー項目を使用するにはどうすればいいですか？

Question

ポリマー文書のセクションに記載されているtransform navigation demoは、arrayのitemsを使用して、app-drawerおよびapp-headerに2回使用される1つのメニューを構築します。ソースhereを参照してください。

簡単な例を以下に示します。

<app-drawer-layout> 
    <app-drawer> 
    <paper-menu> 
     <!-- MENU ITEMS --> 
    </paper-menu> 
    </app-drawer> 
    <app-header-layout> 
    <app-header> 
     <app-toolbar> 
     <div main-title>App name</div> 

     <paper-tabs> 
      <!-- SAME MENU ITEMS HERE --> 
     </paper-tabs> 
     </app-toolbar> 
    </app-header> 

    main content 

    </app-header-layout> 
</app-drawer-layout> 

これは、メニュー項目を初期化するスクリプトの一部です：

items: { 
    type: Array, 
    value: function() { 
    return ['Item One', 'Item Two', 'Item Three', 'Item Four', 'Item Five']; 
    } 
} 

一度だけのメニューを初期化するためのより良い方法だろう何配列を使わずに？新しいelementようなメニューを定義する

は素晴らしいことだが、これは引き出しの中にこれらがpaper-menuの項目であり、ヘッダにこれらがpaper-tabsているので、私は推測動作しません。

Answer 1

項目の配列を表示する新しい要素を作成します。 の項目から要素属性の表示項目にデータをバインドします。 また、選択したアイテムを伝播する属性も必要です。

<item-menu display-items=[[items]] selected-item={{selectedItem}}></item-menu> 


<app-drawer-layout> 
    <app-drawer> 
    <paper-menu> 
     <item-menu display-items=[[items]] selected-item={{selectedItem}}></item-menu> 
    </paper-menu> 
    </app-drawer> 
    <app-header-layout> 
    <app-header> 
     <app-toolbar> 
     <div main-title>App name</div> 

     <paper-tabs> 
      <item-menu display-items=[[items]] selected-item={{selectedItem}}></item-menu> 
     </paper-tabs> 
     </app-toolbar> 
    </app-header> 

    main content 

    </app-header-layout> 
</app-drawer-layout> 

Ps：このコードは、配列アイテムの値を複数のポリマー要素に伝播する方法を示しています。私はあなたが新しいポリマー要素を作成し、あなたのアプリにそれらをインポートすることに精通していると仮定しました。