Динамический фон на бумажной панели в Полимере

Question

Я использую Polymer 1.0 Starter Kit. Я пытаюсь изменить фон и цвет панели инструментов при смене маршрутов.

<paper-scroll-header-panel main id="headerPanelMain" condenses keep-condensed-header 
    header-height="256" condensed-header-height="100"> 
    <paper-toolbar> 
     <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button> 
     <span class="space"></span> 
     <!-- Toolbar icons --> 
     <nt-toolbar-icons></nt-toolbar-icons> 
     <!-- Application name --> 
     <div class="middle middle-container"> 
     <div class="app-name">[[route.title]]</div> 
     </div> 
     <!-- Application sub title --> 
     <div class="bottom bottom-container"> 
     <div class="bottom-title">[[route.subline]]</div> 
     </div> 
    </paper-toolbar> 
    <div style="height: 1400px;"> 
     <iron-pages attr-for-selected="data-route" selected="{{route.name}}"> 
     <section data-route="home"> 
      {{route.title}}/
     </section> 
     <section data-route="users"> 
      users {{route.params.type}} 
     </section> 
     </iron-pages> 
    </div> 
    </paper-scroll-header-panel> 
</paper-drawer-panel> 

Маршрут определяется в элементах/routing.html

page('/', function() { 
    app.route = { 
     name: 'home', 
     title: 'noTos+', 
     subline: '' 
    } 
    }); 

В моей разделяемой styles.html моей панели инструментов определяется следующим образом:

paper-scroll-header-panel#headerPanelMain { 
     position: absolute; 
     top: 0; 
     right: 0; 
     bottom: 0; 
     left: 0; 
     background-color: var(--paper-grey-200, #eee); 

     /* background for toolbar when it is at its full size */ 
     --paper-scroll-header-panel-full-header: { 
     background-image: url(../images/headers/bg4.jpg); 
     } 
     /* background for toolbar when it is condensed */ 
     --paper-scroll-header-panel-condensed-header: { 
     background-color: var(--paper-light-blue-600); 
     } 
    } 

Но теперь я хочу этот цвет/фоновая схема, которая будет изменена при изменении маршрута. Я попытался добавить data-route $ = "[[route.name]]" на панель прокрутки листа бумаги. Тогда я изменил разделяемой styles.html с [данных маршрута = «домашнего»] селекторного:

paper-scroll-header-panel#headerPanelMain[data-route="home"] { 
    --paper-scroll-header-panel-full-header: { 
     background-image: url(../images/headers/bg3.jpg); //BG CHANGES HERE 
     } 
} 

Но это не работает. Любые другие идеи?

Answer 1

Пользовательские стили применяются только во время создания. Если у вас есть такие динамические изменения, как вы здесь, вам нужно позвонить updateStyles на свой пользовательский элемент или Polymer.updateStyles для глобального обновления. В вашем случае вы это сделаете, когда маршрут изменится. Вы можете найти больше информации в documentation.

Answer 2

вы можете сделать следующее.

<paper-toolbar id="mainToolbar" class="tall" style$={{computedStyleHandler(color)}}> 


computedStyleHandler: function(color){ 
    return 'background-color:' + color + ';' 
}