在 Polymer 中使用 dom-if

Question

dom-if 在给定的代码中不起作用。代码正在处理和调试中，它也是 returns true。但是模板没有显示！

为什么模板不显示？

<template is="dom-repeat" items="[[persistedProducts]]" as="product">
  <template is="dom-if" if="{{isProductLiked(product)}}">
    <paper-button on-click="dislikeThisProduct" 
      title="Click to UnLike" class="title-rose">
      <iron-icon icon="icons:thumb-up" class="title-rose" style="width:28px; height:17px;"></iron-icon>
      Liked
    </paper-button>
  </template>
</template>

isProductLiked: function(product) {
  let uid = this.user.uid;

  //Add visitor/user details here..
  this.$.queryProductLikes.disabled = false;
  this.$.queryProductLikes.ref.child(product.$key).child(uid).on("value", function(snapshot) {
    if(snapshot.val() != null) {
      //Display Like - if Liked.
      if(snapshot.val().isLiked) {
        return true;
      }
      return false;
    } else {
      //Not Liked
      return false;
    }
  });
}

Answer 1

我认为问题出在 isProductLiked 函数中：

this.$.queryProductLikes.ref.child(product.$key).child(uid).on("value", function(snapshot) {
  if (snapshot.val() != null) {
    if (snapshot.val().isLiked) {
      return true;
    }
    return false;
  } else {
    return false;
  }
});

你在这里使用了一个匿名函数 (... function(snapshot) { ...)，所以当你 return true 或 false 你不在 return isProductLiked 函数，但在这个匿名函数中。

编辑

我不熟悉 Firebase，所以这些可能有效也可能无效：

可能的解决方案#1

在isProductLiked函数外查询喜欢的商品
根据结果设置属性。（在这个例子中我们称之为 productLikes）
在 dom-if 中使用此结果，如下所示：<template is="dom-if" if="{{isProductLiked(product, productLikes)}}">
修改 isProductLiked 函数以包含 productLikes 参数并处理新逻辑。

这里的想法是，从 isProductLiked 函数中删除任何异步函数调用。

可能的解决方案 #2

重新设计了数据存储和查询，所以persistedProducts也包含了点赞。所以你可以这样写 dom-if：<template is="dom-if" if="{{product.isLiked}}">.

在 Polymer 中使用 dom-if

Using dom-if in Polymer

polymer

polymer-1.0

polymer-starter-kit