2016-08-16 2 views
0

У меня есть свой комплект для запуска полимеров, и я хочу реализовать Firebase. В индексном файле я импортировал полимерный огонь/firebase-app.html и в my-list.html импортировал полимерный огонь/полимерный огонь .html и попытаться запросить базу данных и повторить шаблон и не работаетВнедрение firebase в комплект для полимерных стартеров

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" 

ответ

0

Правильный код. Проблема заключалась в разрешениях 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>