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 
    } 
}