Полимер - Измените содержимое панели инструментов в зависимости от выбранного листа железа

Question

Расширение на наборе для начинающих Polymer. Я пытаюсь выяснить, как я могу изменить значок гамбургера (menu) на другую кнопку, когда активен другой iron-page.

---

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 маршрут, я хотел бы заменить menupaper-toggle-button с кнопкой back. Возможно, изменение текста панели инструментов из названия приложения в «Назад к началу рассказов».

Теперь, я думаю, это возможно, установив id на каждый из этих элементов управления, а затем у вас есть Javascript в элементе item-info, который вносит эти изменения. Я бы предпочел что-то более модульное, так как это очень близко привязывало бы мой элемент 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.