2017-08-08 105 views
0

我正在創建一個dom模塊來在div中顯示我的firebase數據。我跟隨在https://www.youtube.com/watch?v=9AHDSGitDP0&t=639s Polycast視頻,但firebase查詢組件不拉入數據。控制檯中除登錄的用戶數據外不會顯示任何數據,並且沒有錯誤。我看到其他人在用聚合物火力拉動數據時遇到了問題,我在這裏嘗試瞭解決方案,但沒有運氣:Polymer + Firebase (Polymerfire): <firebase-query> not working inside single page app view (with <firebase-app> located in my-app.html)沒有使用polymefire firebase-query元素返回的數據

有人可以幫忙嗎?

在我的主HTML頁面我有以下幾點:

<head> 
    <meta charset="utf-8"> 
    <link rel="stylesheet" href="stylesheets/style.css"> 
    <link rel="import" href="../bower_components/polymer/polymer.html"> 
    <link rel="import" href="../bower_components/polymerfire/polymerfire.html"> 
    <link rel="import" href="../bower_components/polymerfire/firebase-app.html"> 
    <link rel="import" href="../bower_components/polymerfire/firebase-database-script.html"> 
    <link rel="import" href="../bower_components/webcomponentsjs/webcomponents-lite.js"> 
    <link rel="import" href="elements/browse-events.html"> <!-- my custom component --> 
</head> 

<body> 
      <firebase-app 
       api-key="" 
       auth-domain="" 
       database-url="" 
       project-id="" 
       storage-bucket="" 
       messaging-sender-id=""> 
      </firebase-app> 

      <!-- my custom component --> 
      <browse-events></browse-events> 

</body> 

下面是我的組件的文件中的代碼(瀏覽-events.html)

<!-- dependencies --> 
<link rel="import" href="../bower_components/polymer/polymer.html"> 
<link rel="import" href="../bower_components/polymerfire/polymerfire.html"> 
<link rel="import" href="../bower_components/polymerfire/firebase-app.html"> 
<link rel="import" href="../bower_components/polymerfire/firebase-database-script.html"> 
<link rel="import" href="../bower_components/polymerfire/firebase-database-behavior.html"> 
<link rel="import" href="../bower_components/polymerfire/firebase-query.html"> 

<dom-module id="browse-events"> 
    <template> 
     <firebase-query 
         id="query-all" 
         app-name="authtest-54513" 
         path="/events" 
         data="{{events}}"> 
     </firebase-query> 

     <template is="dom-repeat" items="[[events]]" as="event"> 
      <div> 
       <h1>[[event.title]]</h1> 
      </div> 
     </template> 
    </template> 

    <script> 
     Polymer({ 
      is:'browse-events', 
      properties: { 
       events: { 
        type: Object 
       } 
      } 
     }); 
    </script> 
</dom-module> 

回答

1

如果您使用火力的應用程序名稱 - 您需要在firebase-app中指定name。如果你在你的應用中只使用一個firebase-app,你可以在firebase-appapp-name中忽略name

物業events可能是一個數組,而不是一個對象:

如果查詢的子節點的對象(大多數情況下),data將 是那些對象的數組添加了一個額外的$key場到 代表了關鍵。如果子節點是非對象葉節點值,則 data將是結構爲{$key: key, $val: val}的對象的數組。 https://github.com/firebase/polymerfire/blob/master/firebase-query.html

在一個側面說明:您只需要輸入你的firebase-query元素browse-events裏面。 Firebase查詢將導入它自己運行所需的腳本。 (同樣適用於firebase-app在你的主html頁面)

+0

謝謝,修正了它,特別是當我從firebase-query中拿走應用程序名稱時。非常感謝! – greynolds