Question

我在使用聚合物中的dom-repeat显示图像时遇到问题。我使用Firebase存储来存储图像。

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

从上面的元素一切正常，它们显示信息，但是使用计算函数，它不会正确返回url。

这是计算出的绑定代码：

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

通过记录上述函数中的url，它会从firebase存储中显示正确的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之前首先记录undefined。因此，照片变量在更改之前返回。帮助解决这个问题？这对JS不太好:(

Answer 1

抱歉，我记得发布了答案：

func textView(textView: UITextView, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool
{
    if text == "\n"
    {
        view.endEditing(true)
        return false
    }
    else
    {
        return true
    }
}

因此，您可以看到我在计算的绑定函数中添加了一个索引参数，并为与索引连接的纸卡指定了一个ID，以区分其他参数。

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

因此，每当提取图像网址时，它将根据dom-repeater生成的id引用图像属性。使用此方法。$$（查询）：）

感谢帮助伙伴。 @zerohero

通过计算绑定在Polymer中使用dom-repeat动态从Firebase获取文件URL

1 个答案: