聚合物 - 根據選定的熨斗更改紙張 - 工具欄內容

Question

在聚合物入門套件上展開我很努力想知道當不同的iron-page處於活動狀態時，如何將漢堡包（menu）圖標更改爲不同的按鈕。

---

的index.html

<paper-toolbar class="paper-toolbar-0" id="mainToolbar"> 

    <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button> 
    <!-- more toolbar content here --> 

</paper-toolbar> 

<iron-pages attr-for-selected="data-route" class="layout vertical center" selected="{{route}}"> 

    <!-- Top Stories -->  
    <section data-route="topstories"> 
    <story-list id="story-list" class="layout vertical center-justified"></story-list> 
    </section> 

    <!-- Item Info -->  
    <section data-route="item-info" class="fullbleed layout center-justified"> 
    <item-info firebase-item-id="[[params.firebaseitemid]]" class="fullbleed flex"></item-info> 
    </section> 

</iron-pages> 

---

當選擇item-info路線，我想用back按鈕來替換menupaper-toggle-button。可能將工具欄文本從應用程序標題更改爲「返回頂部故事」。

現在，我認爲通過在這些控件上設置一個id，然後在做出這些更改的item-info元素中包含一些Javascript。我更喜歡一些更模塊化的東西，因爲這會將我的item-info元素與其外部的內容非常接近。

Answer 1

我做了一個自定義聚合物元素，您將一組圖標放到工具欄上。

下面是代碼：

<dom-module id="my-toolbar-icons"> 
<template> 
    <template is="dom-repeat" items="{{contextualButtons}}" as="button" id="buttonsRepeat"> 
     <paper-icon-button contextual-action="{{button.action}}" icon="{{button.icon}}" on-tap="onContextualButtonTap"></paper-icon-button> 
    </template> 
</template> 

<script> 
Polymer({ 
    is: 'my-toolbar-icons', 
    properties: { 
     contextualButtons: { 
      type: Array, 
      value: function() { 
       return []; 
      } 
     } 
    }, 
    ready: function(){ 
     //set data just to show an icon 
     this.contextualButtons = [{ icon: 'social:person-add', action: 'new' }, { icon: 'delete', action: 'delete' }, { icon: 'cloud-upload', action: 'update' }, { icon: 'image:camera-alt', action: 'takephoto' }, { icon: 'search', action: 'search' }]; 
    }, 
    setData: function (newContextualButtons) { 
     //set data to the array (usage) 
     //var item = document.querySelector("#id-of-this-element") 
     //item.setData(someArrayOfIcons) 
     this.contextualButtons = newContextualButtons; 
    }, 
    onContextualButtonTap: function (event) { 
     var item = this.$.buttonsRepeat.itemForElement(event.target); 
     this.fire('customize-listener', item.action); 
    } 
}); 
</script> 
</dom-module> 

<!--Usage--> 
<my-toolbar-icons id="my-toolbar-icons"></my-toolbar-icons> <!--declaration--> 

<!--with javascript--> 
this.toolbar= document.querySelector("#my-toolbar-icons"); 
this.toolbar.setData([{ icon: 'social:person-add', action: 'new' }]); 

這只是一個可以用來做你想做的事的想法。

Answer 2

我假設您的paper-toolbar和您的iron-pages都位於相同的模板中，因此兩者都可以評估route屬性。你可以輕鬆地去，並有一個if-template或切換hidden parameter of the navigation element。