Polymer 1.x: Deep link databinding to Firebase

Question

I want to databind a settings object to deep links in my Firebase via a firebase-document element as follows:

my-element.html

<firebase-document location="<my-firebase>/users/uid/settings"
                   data="{{settings}}"</firebase-document>
...
<paper-input label="Name" value="{{settings.name}}"></paper-input>
<paper-input label="Email" value="{{settings.email}}"></paper-input>
...
settings: {
  type: Object,
  notify: true,
  value: {},
...

When I enter values in the paper-input fields in my app for name and email, I expect to see the Firebase values update. But, instead, they do not update.

What is the best-practice method to accomplish this deep-link databinding?

Edit

I just noticed there are 35 open issues with the firebase-element and this codelab appears to bypass using it for the same reasons. If the element isn't fully ready yet, please just state that. Also, the imports seem unusual based on the language here:

Components that want to use firebase should depend on firebase-element and import firebase.html to be safe from library duplication. Such components need not use Polymer or firebase-element, but we put the import and the element in one package for convenience.

It's hard to understand what the above paragraph is trying to say. So an example would help.

Answer 1

The OP code only works to edit an existing record. It does not work to create a new record at the endpoint (e.g., /settings in this case).

To do that, you must add an initial value when it doesn't otherwise exist at the Firebase endpoint as follows:

1. Test for the presence of an initial firebase value using on-firebase-value="_firebaseLoaded".
2. If none, (conditionally) add one inside the _firebaseLoaded method.

my-element.html

<firebase-document location="https://my-firebase.firebaseio.com/settings"
  data="{{settings}}" on-firebase-value="_firebaseLoaded"></firebase-document>
...
<paper-input label="Name" value="{{settings.name}}"></paper-input>
...
settings: {
  type: Object,
  notify: true,
  value: {},
}
...
_firebaseLoaded: function() {
  if(!this.settings) {
    this.set('settings', {});
  }
},

Also, this post might be helpful reading.