Polymerfire auth globallyを使用

Question

私はfirefoxベースの認証要素がpolymerfireを使用している場合、ユーザー属性をグローバルに使用するにはどうすればよいでしょうか？例えば

私は、ログインボタンを持つ要素がある場合：

<dom-module id="tab-b"> 
<template> 
    <style> 
    </style> 
<firebase-app auth-domain="example.firebaseapp.com" 
    database-url="example.firebaseio.com/" 
    api-key=""> 
</firebase-app> 
<firebase-auth id="auth" location="{{location}}" user="{{user}}"provider="google" on-error="handleError"> 
</firebase-auth> 

<paper-button id="googSignIn" class$="signInButton {{_getMiniClass()}}"on-tap="login" raised> 
    Google 
</paper-button> 

</template> 

<script> 
(function() { 
    'use strict'; 
    Polymer({ 
    is: 'tab-b', 

     properties:{ 

     user: { 
     type: Object 
     }, 

     statusKnown: { 
     type: Object 
     } 
     }, 

    login: function(){ 
     return this.$.auth.signInWithPopup(); 
    }, 

    logout: function(){ 
     return this.$.auth.signOut(); 
    } 
    }); 
})(); 
</script> 
</dom-module> 

をそして私はこのような多くのコンポーネントを表示または非表示にする：

<element show$={{!user}}><element> 

Answer 1

アプリのエントリポイントから（my- app.html）、ユーザー値をそのオブジェクトに割り当てます。あなたのアプリ状態の担当となったオブジェクトのアプリは、あなたは、このような表示状態としてAppオブジェクトへのより多くの情報を追加し

<!-- Firebase authentication --> 
<firebase-auth 
    id="auth" 
    user="{{app.user}}" 
    status-known="{{app.availability.available}}" 
    online="{{app.availability.isOnline}}" 
    signed-in="{{app.availability.userIsSignedIn}}" 
    provider="google"> 
</firebase-auth> 

に任意のプロパティを追加することができます。

<iron-media-query id="mq-phone" 
        full 
        query="(max-width:480px)" 
        query-matches="{{app.display.isPhoneSize}}"></iron-media-query> 
<iron-media-query id="mq-tablet" 
        full 
        query="(min-width:481px) and (max-width:840px)" 
        query-matches="{{app.display.isTabletSize}}"></iron-media-query> 
<iron-media-query id="mq-desktop" 
        query="(min-width:841px)" 
        query-matches="{{app.display.isDesktopSize}}"></iron-media-query> 

バインドあなたはちょうどあなたが値を必要とする任意の場所に `firebase-auth`要素を追加することができ、他の要素

<!-- Drawer content --> 
    <app-drawer id="drawer" slot="drawer"> 
    <app-toolbar>Menu</app-toolbar> 
    <iron-selector selected="[[page]]" attr-for-selected="name" 
     class="drawer-list" role="navigation"> 
     <a name="view1" app="{{app}}" href="/view1">View One</a> 
     <a name="view2" app="{{app}}" href="/view2">View Two</a> 
     <a name="view3" app="{{app}}" href="/view3">View Three</a> 
    </iron-selector> 
    </app-drawer>