very new polymer , polymerfire. couldn't find answer here hoping can here. basic question have "how work data polymerfire/firebase-query sends?" note i'm using polymerfire version 0.9.4, , polymer version 1.4.0.
i can load data firebase no problem using firebase query, of values raw numbers need convert user friendly information. example have time stored in ms want convert date, , numeric field indicates "type" of data stored , want show icon it, not raw number. figured best option use transactions-complete promise or observer. both fire neither seems give me access data. observer's newdata empty array, , transactions-complete.. don't know when promise fires. below relevant code. tried using notify: true, seem not grasping 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]); // when query returns values? }, transactioncompleted: new promise(function(resolve, reject) { // how can access "data" here? })`
i wound going way entirely, seemed cleaner approach doing anyways. broke down separate components. way when detail component loaded, ready function allow me adjust data before 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 javascript ready function can intercept , adjust 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); },
Comments
Post a Comment