polymerfire/firebase-query transaction complete event

Question

Very new to Polymer and Polymerfire. I couldn't find an answer here so hoping I can get help here. The basic question I have is "how do I work with the data that polymerfire/firebase-query sends?" Note I'm using polymerfire version 0.9.4, and polymer is version 1.4.0.

I can load my data from Firebase no problem using Firebase query, however some of the values are raw numbers that I need to convert to user friendly information. For example I have time stored in ms that I want to convert to a date, and a numeric field that indicates the "type" of data that is stored and I want to show an icon for it, not just a raw number. I figured my best option would be to use the transactions-complete promise or an observer. Both fire but neither seems to give me access to the data. The Observer's newData is an empty array, and transactions-complete.. well I don't really know what to do with that when the promise fires. Below is my relevant code. I also tried using notify: true, but I seem to not be grasping the concept correctly.

<firebase-query
    id="query"
    app-name="data"
    path="/dataPath"
    transactions-complete="transactionCompleted"
    data="{{data}}">
</firebase-query>

<template is="dom-repeat" items="{{data}}">
  <div class="card">
    <div>Title: <span>{{item.title}}</span></div>
    <div>Date Created: <span>{{item.dateCreated}})</span></div>
    <div>Date Modified: <span>{{item.dateModified}}</span></div>
    <div>Status: <span>{{item.status}}</span></div>
  </div>
</template>

Polymer({
  is: 'my-view1',
  properties: {
      data: {
        notify: true,
        type: Object,
        observer: 'dataChanged'
      }
  },
  dataChanged: function (newData, oldData) {
    console.log(newData[0]);
    // do something when the query returns values?
  },
  transactionCompleted: new Promise(function(resolve, reject) {
 //        how can I access "data" here? 
  })`

Answer 1

I wound up going another way entirely, which seemed to be a cleaner approach to what I was doing anyways. I broke it down into separate components. This way when the detail component was loaded, the ready function would allow me to adjust the data before it got displayed:

list.html:

<firebase-query
    id="query"
    app-name="data"
    path="/dataPath"
    data="{{data}}">
</firebase-query>

<template is="dom-repeat" items="{{data}}">
   <my-details dataItem={{item}}></my-details>
</template>

details.html

 <template>
    <div id="details">
      <paper-card heading="{{item.title}}">
        <div class="card-content">
          <span id="description">{{item.description}}</span><br/><br/>
          <div class="details">Date Created: <span id="dateCreated">{{item.dateCreated}}</span><br/></div>
          <div class="details">Last Modified: <span id="dateModified">{{item.dateModified}}</span><br/></div>
          <div class="status"><span id="status">{{item.status}}</span><br/></div>
        </div>
      </paper-card>

  </template>

Then in the javascript ready function I can intercept and adjust the data accordingly:

Polymer({
  is: 'my-details',
  properties: {
      item: {
        notify: true,
      },
  },
 ready: function() {
    this.$.dateModified.textContent = this.getDate(this.item.dateModified);
    this.$.dateCreated.textContent = this.getDate(this.item.dateCreated);
    this.$.status.textContent = this.getStatus(this.item.status);
  },