How to global firebase polymer data binding?

Question

I want to use <firebase-login> user object to check if user logged in for my elements. How do I global the user object without calling below code in every custom element?

<firebase-login id="login"
                user="{{user}}"
                statusKnown="{{statusKnown}}" 
                location="FIREBASE_URL"
                provider="{{provider}}" 
                on-error="{{error}}"></firebase-login>

Answer 1

Create a custum-element that looks something like this,

<polymer-element name="example" attributes="user">
 <template>
  <firebase-login 
    id="login"
    user="{{user}}"                
    statusKnown="{{statusKnown}}"                 
    location="FIREBASE_URL"
    provider="{{provider}}"                
    on-error="{{error}}">
  </firebase-login>
 </template>

  <script>
    Polymer({

    })
  </script>
</polymer-element>

Then use pvc-globals or create another custom element that passes globals Polymer has an example app-globals where they show how to do this.

<polymer-element name="app-example" attributes="globals">
  <template>
    <pvc-globals value="{{globals}}"></pvc-globals>
    <example-element user="{{user}}"></example-element>
  </template>
  <script>
    Polymer({
      ready: function () {
        this.globals.user = this.user;
      }
    });
  </script>
</polymer-element>

Or from within the example element:

<polymer-element name="example" attributes="user globals">
 <template>
   <pvc-globals value="{{globals}}"></pvc-globals>
  <firebase-login 
    id="login"
    user="{{user}}"                
    statusKnown="{{statusKnown}}"                 
    location="FIREBASE_URL"
    provider="{{provider}}"                
    on-error="{{error}}">
  </firebase-login>
 </template>

  <script>
    Polymer({
      ready: function () {
        this.globals.user = this.user;
      }
    })
  </script>
</polymer-element>

Hope this helps!