Firebase 2.x + Polymer 1.x: загрузка Polymerfire из CDN и получение данных

Я хочу использовать элемент polymerfire для получения данных в https://dinosaur-facts.firebaseio.com/dinosaurs и отображения данных в элементе dom-repeat.

Что я делаю не так? Как мне это сделать правильно?

Вот 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>

firebase firebase-realtime-database polymer polymerfire firebase-polymer
person Let Me Tink About It    schedule 16.11.2016    source источник
comment
Сначала вам не хватает импорта firebase-document. Будет firebase-element/firebase-document.html   -  person a1626    schedule 16.11.2016
comment
Как ни странно, если вы используете test вместо dinosaurs и включаете подробное описание в firebase-document с помощью атрибута log, вы получаете этот журнал Query does not exist. Не работал с firebase, поэтому не знаю, что это значит. Надеюсь, поможет   -  person a1626    schedule 16.11.2016
comment
@ a1626: Не могли бы вы дать ссылку на свой jsBin? Я не могу заставить импорт работать так, как вы описываете. Спасибо.   -  person Let Me Tink About It    schedule 16.11.2016
comment
вот корзина   -  person a1626    schedule 16.11.2016

Ответы (2)


arrow_upward
1
arrow_downward

Чтобы получить данные в виде массива/коллекции, вам нужно использовать элемент <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>
person Michael Bleigh    schedule 18.11.2016

arrow_upward
0
arrow_downward

Вам нужен <firebase-app> для инициализации приложения Firebase, не так ли?

person motss    schedule 18.11.2016
comment
Не могли бы вы поделиться файлом jsBin или CodePen, объясняющим, о чем вы думаете? - person Let Me Tink About It; 18.11.2016