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

結局、私は完全に別の道を歩むことになりました。私はそれを別々のコンポーネントに分解しました。このようにすると、詳細コンポーネントがロードされたときに、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 の準備完了関数で、それに応じてデータを傍受して調整できます。

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 に答える