polymerfire/firebase-query取引完了イベント

Question

Polymer and Polymerfireの新機能です。私はここで答えを見つけることができませんでしたので、私はここで助けを得ることを望んでいます。私が持っている基本的な質問は、「polymerfire/firebase-queryが送信するデータをどのように扱うのですか？注：私はpolymerfireバージョン0.9.4を使用しており、ポリマーはバージョン1.4.0です。

Firebaseのクエリを使用してFirebaseからデータを読み込むことはできますが、値の一部はユーザフレンドリな情報に変換するために必要な生の数値です。たとえば、日付に変換する時間をmsで格納し、格納されているデータの "タイプ"を示す数字フィールドを使用しています。未処理の数値だけでなくアイコンを表示したいとします。私は自分の最善の選択肢は、トランザクション完全な約束またはオブザーバーを使用することになると考えました。どちらも火災だがどちらもデータにアクセスできないようだ。 ObserverのnewDataは空の配列で、トランザクションが完了しました。まあ、約束事が起こったときにどうしたらいいのか分かりません。以下は関連コードです。私もnotify：trueを使ってみましたが、私は正しく概念を把握していないようです。

<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

私はとにかく何をしていたかにクリーンなアプローチであるように思われ、完全に別の道を進んで巻き取りました。私は別のコンポーネントに分割しました。

する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> 

詳細は、詳細コンポーネントがロードされたときに、この方法では、レディ機能は、それが表示されてしまった前に私がデータを調整することができるようになります。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> 

その後のJavaScriptレディ機能で、私はそれに応じてデータを傍受して調整することができます。

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); 
    }, 

Answer 2

次のように変更してみてください。

• はtransactions-completed属性を取り出し - クエリがFirebaseにデータを更新しているときにのみ関連し
• 変更dom-repeatテンプレートがconvertedDataから、それはitems属性です取得する - これはあなたがconvertedDataプロパティを追加firebase-query

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

<template is="dom-repeat" items="{{convertedData}}"> 
    <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> 

• の結果##見出し##ためにデータ変換を行うことができます生データを持つdataからデータ変換を行います
• 例に従ってobserverの構文を変更してください。これは、解雇された観測方法につながる深いプロパティ値への変更を観察するためにオブザーバーを設定 - 参照：https://www.polymer-project.org/1.0/docs/devguide/observers#deep-observation
• をオブザーバ方法であなたは、コンテンツをレンダリングする必要がありますdataオブジェクトからconvertedDataオブジェクトを移入することができます

Polymer({ 
    is: 'my-view1', 
    properties: { 
     data: { 
     notify: true, 
     type: Object 
     }, 
     convertedData: { 
     notify: true, 
     type: Object 
     } 
    }, 
    // observer syntax to monitor for deep changes on "data" 
    observers: [ 
     'dataChanged(data.*)' 
    ] 
    dataChanged: function (newData, oldData) { 
    console.log(newData); 
    // convert the "newData" object to the "convertedData" object 
    } 
}