Polymer：Help using dom-if

Question

dom-if在給定的代碼中不起作用！代碼正在處理並在調試時也返回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) { ...）一個匿名函數，所以當你返回true或false你是不是在isProductLiked返回函數，但在這個匿名函數中。

編輯

我不熟悉的火力地堡所以這些可能會或可能無法正常工作：

可能的解決方法＃1

1. 查詢產品喜歡isProductLiked功能之外。
2. 根據結果設置屬性。 （讓我們把它叫做productLikes在這個例子中）
3. 使用此結果在dom-if這樣的：<template is="dom-if" if="{{isProductLiked(product, productLikes)}}">
4. 修改isProductLiked功能包括productLikes參數，來處理新的邏輯。

這裏的想法是，從isProductLiked函數中刪除任何異步函數調用。

可能的解決方法＃2

重新設計的數據存儲和查詢，所以persistedProducts包含喜歡了。所以你可以這樣編寫dom-if：<template is="dom-if" if="{{product.isLiked}}">。