我已经启动并运行了我的Polymer Starter Kit，我想实现Firebase，在索引文件中我导入了polymerfire / firebase-app.html并在my-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>
MY-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 :(得分：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>