Question

Polymer和Polymerfire非常新。我无法在这里找到答案，所以希望我能在这里得到帮助。我的基本问题是＆＃34;如何使用polymerfire / firebase-query发送的数据？＆＃34;注意我使用的是Polymerfire 0.9.4版，聚合物版本是1.4.0。

我可以使用Firebase查询从Firebase加载我的数据，但是有些值是我需要转换为用户友好信息的原始数字。例如，我有时间存储在ms中我要转换为日期，而数字字段表示＆＃34;类型＆＃34;存储的数据，我想为它显示一个图标，而不仅仅是一个原始数字。我认为我最好的选择是使用交易完成承诺或观察员。两个火都没有，但似乎都没有让我访问数据。观察者的新数据是一个空数组，交易完成......当承诺触发时，我真的不知道如何处理它。以下是我的相关代码。我也尝试过使用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

我完全走了另一条路，这对我正在做的事情来说似乎更清晰。我将其分解为单独的组件。这样，当加载细节组件时，ready函数允许我在显示之前调整数据：

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 ready函数中我可以相应地拦截和调整数据：

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模板以从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
在观察者方法中，您可以从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
  }
}

polymerfire / firebase-query事务完成事件

2 个答案: