update Firebase data using Polymer's firebase-collection

Question

I am using a firebase-collection element to fetch an array of objects from my Firebase repository in a Polymer application. The data fetches with no problem. Now that I have the objects, how do I update a child property on one of them?

<firebase-collection
  id="myfb"
  location="https://dinosaur-facts.firebaseio.com/dinosaurs"
  data="{{dinosaurs}}">
</firebase-collection>

<template is="dom-repeat" items="[[dinosaurs]]" as="dinosaur">
  <h4>[[dinosaur.__firebaseKey__]]</h4>
  Height: <span>[[dinosaur.height]]</span>
  <iron-icon on-click="updateDino"></iron-icon>
</template>

... polymer boilerplate omitted for brevity ...

updateDino: function(e) {
   var key = e.model.dinosaur.__firebaseKey__;

   // now what? 
   // tried this: e.model.dinosaur.height = 3.1415 
   // but firebase doesn't save the change. 

   // also tried various things with this.$.myfb.add but 
   // it always creates a new element

   // where's the set() method on firebase-collection?
   // something like this.$.myfb.set(key, updatedObj) would be handy.
}

Try using e.model.set('dinosaur.height', 'new value to be set'), that sets it properly so that it's picked by polymer's data binding and that should trigger the firebase-collection update sequence — Alan Dávalos

omarjmh omarjmh · Accepted Answer · 2016-04-15T23:26:49

You can use the firebase document to update data, it can be mapped to a location on firebase like so:

<firebase-document
  location="https://dinosaur-facts.firebaseio.com/dinosaurs"
  data="{{dinosaurs}}"></firebase-document>

A is a reference to a remote document somewhere on Firebase. The element fetchs a document at a provided location, and exposes it as an Object that is suitable for deep two-way databinding.

https://elements.polymer-project.org/elements/firebase-element?active=firebase-document

update Firebase data using Polymer's firebase-collection

2 Answers