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>

路线在elements / routing.html

中定义

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

在我的shared-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);
      }
    }

但是现在我希望在路线改变时改变这种颜色/背景方案。我尝试过添加数据路由$ =＆＃34; [[route.name]]＆＃34;到纸卷轴标题面板。然后我用[data-route =＆＃34; home＆＃34;]选择器更改了shared-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

您可以执行以下操作。

Firebase *firebase = [[Firebase alloc] initWithUrl:@"https://<my-app-name>.firebaseio.com"];
[[firebase childByAppendingPath:@".info/connected"] observeEventType:FEventTypeValue withBlock:^(FDataSnapshot *snapshot) {
    BOOL isConnected = [snapshot.value boolValue];
    // broadcast whether app is connected to Firebase
}];
Firebase *directory = [firebase childByAppendingPath:@"users"];
FQuery *query = [directory queryOrderedByChild:@"hidden"];
query = [query queryEqualToValue:value];
[query observeSingleEventOfType:FEventTypeValue withBlock:^(FDataSnapshot *snapshot) {
    // data successfully retrieved from Firebase
}];

聚合物中的动态纸工具栏背景

2 个答案: