Configuring firebase-element

[Keith Garrod]

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, 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?

[Keith Garrod]

I figured this out, thanks to this post.

<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!