2

Polymer 和 Polymerfire 非常新。我在这里找不到答案，所以希望我能在这里得到帮助。我的基本问题是“我如何处理 polymerfire/firebase-query 发送的数据？” 注意我使用的是polymerfire 0.9.4 版，而polymer 是1.4.0 版。

我可以使用 Firebase 查询从 Firebase 加载我的数据，但是其中一些值是我需要转换为用户友好信息的原始数字。例如，我有一个以毫秒为单位的存储时间，我想将其转换为日期，还有一个数字字段，指示存储的数据的“类型”，我想为其显示一个图标，而不仅仅是一个原始数字。我认为我最好的选择是使用交易完成承诺或观察者。两者都开火，但似乎都没有让我访问数据。观察者的 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? 
  })`
4

2 回答 2

1

我最终完全采用了另一种方式，无论如何这似乎是我正在做的事情的一种更清洁的方法。我把它分解成单独的组件。这样，在加载详细信息组件时，就绪函数将允许我在数据显示之前对其进行调整：

列表.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 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);
  },
于 2016-08-26T22:38:36.617 回答
0

尝试以下更改：

  • 取出属性 - 仅当查询将数据更新到 Firebasetransactions-completed时才相关
  • 更改dom-repeat模板以获取其items属性convertedData- 这允许您将数据转换为## Heading ## 的结果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
  }
}
于 2016-08-25T14:07:46.317 回答