Firebase 2.x + Polymer 1.x：從CDN加載Polymerfire並獲取數據

我想使用polymerfire元素來獲取https://dinosaur-facts.firebaseio.com/dinosaurs處的數據，並在dom-repeat元素中顯示數據。Firebase 2.x + Polymer 1.x：從CDN加載Polymerfire並獲取數據

我在做什麼錯？我如何正確地做到這一點？

Here is the jsBin。

http://jsbin.com/zeyimotasa/1/edit?html,console,output

<!doctype html> 
<head> 
    <meta charset="utf-8"> 
    <!-- Source: https://github.com/Download/polymer-cdn --> 
    <base href="https://cdn.rawgit.com/download/polymer-cdn/1.7.0.2/lib/"> 
    <!--- -> 
    <base href="https://polygit.org/components/"> 
    <!--- -> 
    Toggle below/above as backup when server is down 
    <!--- -> 
    <base href="https://polygit2.appspot.com/components/"> 
    <!----> 
    <script src="webcomponentsjs/webcomponents-lite.min.js"></script> 
    <link href="polymer/polymer.html" rel="import"> 
    <link href="polymerfire/polymerfire.html" rel="import"> 
    <link href="paper-button/paper-button.html" rel="import"> 
</head> 
<body> 

<dom-module id="x-element"> 

<template> 
    <style></style> 

    <p> 
    <paper-button on-tap="_handleClick">Click Me</paper-button> 
    </p> 
    <!----> 
    <firebase-document 
     path="https://dinosaur-facts.firebaseio.com/dinosaurs" 
     data="{{dinosaurs}}" 
     > 
    </firebase-document> 
    <template is="dom-repeat" items="[[dinosaurs]]"> 
     [[item.order]] 
    </template> 
    <template is="dom-repeat" items="[[test]]"> 
     [[item]] 
    </template> 
    <!----> 

</template> 

<script> 
    (function(){ 
    Polymer({ 
     is: "x-element", 
     properties: { 
     dinosaurs: Array, 
     test: { 
      value: function() { 
      return ['foo', 'bar', 'baz']; 
      } 
     }, 
     }, 
     _handleClick: function() { 
     console.log('You clicked me!'); 
     } 
    }); 
    })(); 
</script> 

</dom-module> 

<x-element></x-element> 

</body>

來源

2016-11-16 Mowzer

首先您缺少'firebase-document'的導入。它會是'firebase-element/firebase-document.html' – a1626

奇怪的是，如果你使用'test'而不是'dinosaurs'，並且在'firebase-document'中使用屬性'log'切換了詳細信息，你會得到這個日誌'Query不存在'。沒有與Firebase一起工作，所以我不知道這是什麼意思。希望它有幫助 – a1626

@ a1626：你能否提供一個鏈接到你的jsBin？我無法按照您描述的方式獲取導入信息。謝謝。 – Mowzer

要以數組/集合形式獲取數據，您需要使用<firebase-query>元素，而不是<firebase-document>。您還需要用<firebase-app>初始化您的應用程序：

<firebase-app api-key="XXX" database-url="yyy" auth-domain="zzz"></firebase-app> 
<firebase-query path="/dinosaurs" data="{{dinosaurs}}"></firebase-query> 

<template is="dom-repeat" items="[[dinosaurs]]"> 
    <!-- ... --> 
</template>

來源

2016-11-18 18:38:41

你需要一個<firebase-app>初始化火力地堡應用，不是嗎？

來源

2016-11-18 17:41:58 motss

你可以分享一個jsBin或CodePen來解釋你在想什麼嗎？ – Mowzer

Firebase 2.x + Polymer 1.x：從CDN加載Polymerfire並獲取數據

回答

相關問題