将 firebase 实施到 Polymer Starter Kit

Question

我已经准备好我的 Polymer 入门套件运行我想实施 Firebase，在我导入的索引文件中 polymerfire/firebase-app.html 和我的-list.html 我导入了 polymerfire/polymerfire.html 并尝试查询数据库并重复一个模板但没有工作

index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="generator" content="Polymer Starter Kit">
  <title>Vidala</title>
  <meta name="theme-color" content="#2E3AA1">
  <link rel="manifest" href="manifest.json">
  <meta name="msapplication-TileColor" content="#3372DF">
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="application-name" content="PSK">
  <link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="Polymer Starter Kit">
  <link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
  <meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">

  <!-- build:css styles/main.css -->
  <link rel="stylesheet" href="styles/main.css">
  <!-- endbuild-->

  <!-- build:js bower_components/webcomponentsjs/webcomponents-lite.min.js -->
  <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
  <link rel="import" href="elements/elements.html">
  <link rel="import" href="../bower_components/polymerfire/firebase-app.html">
  <!-- For shared styles, shared-styles.html import in elements.html -->
  <style is="custom-style" include="shared-styles"></style>
</head>

<body unresolved>
  <firebase-app
        name="vida_fire"
      api-key="AIzaSyABq6WXbt1LUoAsg26QIbJfgkV0R_T3nUg"
      auth-domain="vidala-63738.firebaseapp.com"
      database-url="https://vidala-63738.firebaseio.com">
  </firebase-app>

  <template is="dom-bind" id="app">
    <paper-drawer-panel id="paperDrawerPanel">
      <paper-scroll-header-panel drawer fixed>
        <paper-toolbar id="drawerToolbar">
          <span class="menu-name">Menu</span>
        </paper-toolbar>
        <paper-menu class="app-menu" attr-for-selected="data-route" selected="[[route]]">
          <a data-route="home" href="{{baseUrl}}">
            <iron-icon icon="home"></iron-icon>
            <span>Home</span>
          </a>
          <a data-route="users" href="{{baseUrl}}users">
            <iron-icon icon="info"></iron-icon>
            <span>Users</span>
          </a>
          <a data-route="contact" href="{{baseUrl}}contact">
            <iron-icon icon="mail"></iron-icon>
            <span>Contact</span>
          </a>
        </paper-menu>
      </paper-scroll-header-panel>
      <!-- Main Area -->
      <paper-scroll-header-panel main id="headerPanelMain" condenses keep-condensed-header>
        <!-- Main Toolbar -->
        <paper-toolbar id="mainToolbar" class="tall">
          <paper-icon-button id="paperToggle" icon="menu" paper-drawer-toggle></paper-icon-button>
          <span class="space"></span>
          <!-- Toolbar icons -->
          <paper-icon-button icon="refresh"></paper-icon-button>
          <paper-icon-button icon="search"></paper-icon-button>
          <!-- Application name -->
          <div class="middle middle-container">
            <div class="app-name">Vidala</div>
          </div>
          <!-- Application sub title -->
          <div class="bottom bottom-container">
            <div class="bottom-title">The future of the web today</div>
          </div>
        </paper-toolbar>
        <!-- Main Content -->
        <div class="content">
          <iron-pages attr-for-selected="data-route" selected="{{route}}">
            <section data-route="home" tabindex="-1">
              <paper-material elevation="2">
                <my-greeting></my-greeting>
                <p class="subhead">Here the list from Firebase:</p>
                <my-list></my-list>
              </paper-material>
              <paper-material elevation="2">
                <p>This is another card.</p>
              </paper-material>
            </section>
            <section data-route="users" tabindex="-1">
              <paper-material elevation="2">
                <h1 class="page-title" tabindex="-1">Users</h1>
                <p>This is the users section</p>
                <a href$="{{baseUrl}}users/Addy">Addy</a><br>
                <a href$="{{baseUrl}}users/Rob">Rob</a><br>
                <a href$="{{baseUrl}}users/Chuck">Chuck</a><br>
                <a href$="{{baseUrl}}users/Sam">Sam</a>
              </paper-material>
            </section>
            <section data-route="user-info" tabindex="-1">
              <paper-material elevation="-1">
                <h1 class="page-title" tabindex="-1">User: {{params.name}}</h1>
                <div>This is {{params.name}}'s section</div>
              </paper-material>
            </section>
            <section data-route="contact" tabindex="-1">
              <paper-material elevation="2">
                <h1 class="page-title" tabindex="-1">Contact</h1>
                <p>This is the contact section</p>
              </paper-material>
            </section>
          </iron-pages>
        </div>
      </paper-scroll-header-panel>
    </paper-drawer-panel>
    <paper-toast id="toast">
      <span class="toast-hide-button" role="button" tabindex="0" onclick="app.$.toast.hide()">Ok</span>
    </paper-toast>
  </template>
  <script src="scripts/app.js"></script>
</body>
</html>

我的-list.html:

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">
<link rel="import" href="../bower_components/polymerfire/polymerfire.html">
<dom-module id="my-list">
  <template>
    <style>
      :host {
        display: block;
      }

      span {
        @apply(--paper-font-body1);
      }
    </style>
    <firebase-query
        id="query"
        app-name="vida_fire"
        path="/notes"
        data="{{data}}">
    </firebase-query>
    <ul>
      <template is="dom-repeat" items="{{data}}" as="note">
        <li>xx</li>
      </template>
    </ul>
  </template>
  <script>
    (function() {
      'use strict';
      Polymer({
        is: 'my-list',
        properties: {
          data: {
            type: Object
          }
        },
        ready: function() {

        }
      });
    })();
  </script>
</dom-module>

这是我的 firebase 数据库：

https://vidala-63738.firebaseio.com/

 vidala-63738
    notes
       diego:"dp"
       mares:"dp"

Answer 1

上面的代码是正确的。问题是 firebase 权限。

{
  "rules": {
    ".read": "auth == null",
    ".write": "auth != null"
  }
}

实施 firebase 时要做的另一件好事是添加错误处理程序

<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/paper-styles/typography.html">
<link rel="import" href="../../bower_components/polymerfire/polymerfire.html">

<dom-module id="my-list">
  <template>
    <style>
      :host {
        display: block;
      }
      span {
        @apply(--paper-font-body1);
      }
    </style>
    <firebase-query
        id="query"
        app-name="vida_fire"
        path="/notes"
        data="{{data}}"
        on-error="handleError">
    </firebase-query>
    <ul>
      <template is="dom-repeat" items="{{data}}" as="note">
        <li>xx</li>
      </template>
    </ul>
  </template>
  <script>
    (function() {
      'use strict';
      Polymer({
        handleError: function(e, err) {
          alert(err);
        },
        is: 'my-list',
        ready: function() {

        }
      });
    })();
  </script>
</dom-module>

将 firebase 实施到 Polymer Starter Kit

Implementing firebase to Polymer Starter Kit

firebase

polymer

firebase-realtime-database

polymer-starter-kit