polymerfire/firebase-query 交易完成事件

Question

Polymer 和 Polymerfire 的新手。我在这里找不到答案，所以希望我能在这里得到帮助。我的基本问题是 "how do I work with the data that polymerfire/firebase-query sends?" 注意我使用的是 polymerfire 0.9.4 版，而 polymer 是 1.4.0 版。

我可以使用 Firebase 查询从 Firebase 加载我的数据没有问题，但是有些值是原始数字，我需要将其转换为用户友好的信息。例如，我将时间存储在 ms 中，我想将其转换为日期，还有一个数字字段，指示存储的数据 "type"，我想为其显示一个图标，而不仅仅是一个原始数字。我认为我最好的选择是使用交易完成承诺或观察者。两者都发生了火灾，但似乎都没有让我访问数据。 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

尝试以下更改：

去掉 transactions-completed 属性 - 只有当查询更新数据到 Firebase
更改 dom-repeat 模板以从 convertedData 获取它的 items 属性 - 这允许您将数据转换为 ## Heading ## [=16] 的结果=]

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

Answer 2

我最终完全走上了另一条路，这似乎是我正在做的事情的一种更干净的方法。我把它分解成单独的组件。这样当加载细节组件时，就绪函数将允许我在显示之前调整数据：

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

polymerfire/firebase-query 交易完成事件

polymerfire/firebase-query transaction complete event

javascript

firebase

polymer

firebase-realtime-database

polymerfire