I figured this out, thanks to this post
<http://pascalprecht.github.io/2014/07/14/inheritance-and-composition-with-polymer/>
.
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import"
href="../bower_components/firebase-element/firebase-element.html">
<polymer-element name="ca-services-collection" attributes="data coachId">
<template>
<firebase-element location="{{location}}"
data="{{data}}"></firebase-element>
</template>
<script>
Polymer('ca-services-collection', Platform.mixin({
publish:{
location: config.firebaseBase + "/services"
}
}, config)
);
</script>
</polymer-element>
I'm not sure if this is the best solution, but it is working!
On Wednesday, July 30, 2014 2:22:26 PM UTC+2, Keith Garrod wrote:
>
> I am trying to make use of firebase-element in my app.
>
> It works great in it's simple form like this:
>
> <firebase-element location="https://myapp.firebaseio.com/services";
> data="{{services}}""></firebase-element>
>
>
> There are a couple of issues with this though:
>
> 1. I need to be able to easily configure the base location (
> https://myapp.firebaseio.com/) for development/production
> environments. I tried to make this a global variable
> <http://www.polymer-project.org/docs/polymer/polymer.html#global>, but
> didn't get that right, so I added a script to my main page, to add a
> simple
> config variable to the window. I still can't figure out how to pass that
> value into the location attribute of the firebase-element (e.g.
> location="{{window.config.firebaseBase}}/services",
> location=window.config.firebaseBase+"/services").
> 2. I would like to be able to add functions to firebase-element for
> different locations (e.g. /services in above example).
>
> So I am trying to extend firebase-element and configure the location
> variable in the process:
>
> <link rel="import" href="../bower_components/polymer/polymer.html">
> <link rel="import"
> href="../bower_components/firebase-element/firebase-element.html">
> <polymer-element name="ca-services-collection"
> extends="firebase-element">
> <script>
> Polymer('ca-services-collection', {
> ready: function(){
> this.attributes.location = window.config.firebaseBase+"/services";
> console.log("Ready Firebase attributes:", this.attributes);
> this.super();
> }
> });
> </script>
> </polymer-element>
>
> This works:
>
> <ca-services-collection location="https://myapp.firebaseio.com/services";
> data="{{services}}"></ca-services-collection>
>
> This doesn't:
>
> <ca-services-collection data="{{services}}"></ca-services-collection>
>
> What am I doing wrong please?
>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/cf3a11f8-4819-486d-a180-fdf3a3247e7b%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
