計算バインディングによるPolymerのdom-repeatを使用したFirebaseからのファイルURLの動的フェッチ

Question

Polymerのdom-repeatを使用してイメージを表示する際に問題があります。 Firebase Storageを使って画像を保存します。

<firebase-query id="productsQuery" 
       data="{{products}}" 
       limit-to-first="2"></firebase-query> 

上記の要素のパスは動的に更新され、正常に動作します。

<template is="dom-repeat" items="[[products]]" index-as="index"> 
    <paper-card image="[[computePhotoURL(item.$key)]]" heading="[[item.name]]"> 
     <div class="card-content"> 
     <p class="shop-name">[[shopName]]</p> 
     <small>Php [[item.price]]</small> 
     </div> 
    </paper-card> 
    </template> 

上記の要素はすべて正常に動作していますが、情報は表示されますが、計算された関数では正しく返されません。

ここで計算された結合コードです：

computePhotoURL: function(key) { 
    var photo; 
    firebase.storage() 
      .ref('users/' + this.data[0].$key + '/products/' + key) 
      .getDownloadURL() 
      .then(function(url) { 
       photo = url; 
       return url; 
      }.bind(this)).catch(function(error) { 
       console.log('there was an error'); 
      }); 
    return photo; 
    } 

はそれがfirebaseストレージから正しいURLが表示されますが、ペーパー - にバインドさ適切な値を返すようには見えません上記の関数からURLをログに記録することによりカードの画像属性。

アイデア？事前にありがとう:)

私は

computePhotoURL: function(key) { 
    var photo; 
    firebase.storage() 
      .ref('users/' + this.data[0].$key + '/products/' + key) 
      .getDownloadURL() 
      .then(function(url) { 
       photo = url; 
       console.log(photo); 
       //logs correct url 
      }.bind(this)).catch(function(error) { 
       console.log('there was an error'); 
      }); 
    console.log('photo', photo); 
    //logs undefined 
    return photo; 
    } 

にそれを変更しようと、それが正しいURLの前に、未定義の最初を記録します。そのため、写真変数は変更される前に返されました。これを修正する方法のヘルプ？ずっとこのJSとの良好ではない:(

Answer 1

私は答えを投稿して思い出した申し訳ありません：

<template is="dom-repeat" items="[[products]]" index-as="index"> 
    <paper-card id="card[[index]]" image="[[computePhotoURL(item.$key, index)]]" heading="[[item.name]]"> 
     <div class="card-content"> 
     <p class="shop-name">[[shopName]]</p> 
     <small>Php [[item.price]]</small> 
     </div> 
    </paper-card> 
    </template> 

あなたが見ることができるように、私は計算の結合機能にインデックスパラメータを追加し、紙のIDを指定他人を区別するためのインデックスと連結-card。画像のURLがフェッチされるたびに、それは、これを使用して、DOM-リピータから生成されたIDからベース画像属性を参照する

computePhotoURL: function(key, index) { 
    var id = '#card' + index; 
    firebase.storage() 
      .ref('users/' + this.data[0].$key + '/products/' + key) 
      .getDownloadURL() 
      .then(function(url) { 
       this.$$(id).image = url; 
      }.bind(this)).catch(function(error) { 
       console.log('there was an error', error); 
      }); 
    } 

それで。$$ （クエリ）:)

help guy esp。ありがとうございます。 @zerohero