polymerfire/firebase-query交易完成事件

Question

聚合物和聚合物燃料是非常新的。我在這裏找不到答案，所以希望我能在這裏得到幫助。我的基本問題是「我如何使用聚合火力/火力點查詢發送的數據？」注意我使用的是聚合物版本0.9.4，聚合物版本是1.4.0。

我可以使用Firebase查詢從Firebase加載我的數據沒有問題，但其中一些值是我需要轉換爲用戶友好信息的原始數字。例如，我有時間存儲在MS中，我想轉換爲日期和一個數字字段，它指示存儲的數據的「類型」，我想爲它顯示一個圖標，而不僅僅是一個原始數字。我認爲我最好的選擇是使用交易 - 完整的承諾或觀察員。兩人都在開火，但似乎沒有讓我獲得數據。觀察者的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屬性 - 它是唯一相關，當查詢更新數據火力地堡
• 更改dom-repeat模板，得到它的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> 

• 結果的convertedData屬性添加到從原始數據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 
    } 
}