polymerfire/firebase-查询事务完成事件

Question

非常新的聚合物和聚合火。我在这里找不到答案，所以希望能在这里得到帮助。我的基本问题是“如何处理polymerfire/firebase查询发送的数据？”注:我使用的是聚合版0.9.4，聚合物版本为1.4.0。

我可以使用Firebase查询从Firebase加载数据，但是其中一些值是原始数字，需要转换为用户友好的信息。例如，我的时间存储在ms中，要转换为日期，还有一个数字字段，该字段指示存储的数据的“类型”，我希望为它显示一个图标，而不仅仅是一个原始数字。我想我最好的选择是利用交易--完全的承诺或者一个观察者。两者都是火，但似乎都不能让我访问这些数据。观察者的newData是一个空数组，事务完成。好吧，我真不知道当希望破灭的时候该怎么办。下面是我的相关代码。我也尝试使用通知: 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>

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>

然后，在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属性-这允许您执行数据转换to##标题## 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。
• 在观察者方法中，可以从convertedData对象填充data对象，然后该对象将呈现内容。

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