How to global firebase polymer data binding? - polymer

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!