我正在尝试将数据插入Polymer中的firebase;使用聚合物火。
当我点击按钮添加数据时，没有任何事情发生。在控制台中，此错误显示＆＃34; Uncaught TypeError：无法读取属性＆＃39; push＆＃39;未定义＆＃34;
以下是我的代码：＆＃34; my-ask.html＆＃34;
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<link rel="import" href="my-fab.html">
<link rel="import" href="../bower_components/paper-input/paper-input.html">
<link rel="import" href="../bower_components/paper-input/paper-textarea.html">
<link rel="import" href="../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../bower_components/paper-item/paper-item.html">
<link rel="import" href="../bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/polymerfire/firebase-query.html">
<dom-module id="my-ask">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
paper-input, paper-textarea {
max-width: 400px;
margin: auto;
margin-bottom: 20px;
}
iron-icon, div[suffix] {
color: hsl(0, 0%, 50%);
margin-right: 12px;
}
paper-dropdown-menu, paper-listbox {
width: 250px;
}
paper-dropdown-menu {
margin: auto;
display: block;
margin-bottom: 30px;
}
paper-button {
width: 48%;
margin: 0 auto;
}
paper-button.green {
background-color: var(--paper-green-500);
color: white;
}
paper-button.green[active] {
background-color: var(--paper-red-500);
}
</style>
<firebase-auth
user="{{user}}">
</firebase-auth>
<firebase-query
id="query"
app-name="lore"
path="/users/[[user.uid]]/questions"
data="{{questions}}"
></firebase-query>
<div id="card">
<div id="questions">
<ul id="questions-list">
<template is="dom-repeat" items="[[questions]]" as="question">
<li>
<p class="content">[[question.content]]</p>
</li>
</template>
</ul>
</div>
</div>
<template is="dom-if" if="[[user]]">
<div class="card">
<h1>Ask a Question [[user.uid]] :</h1>
<paper-input label="Title of your Question" id="qbody"></paper-input>
<paper-textarea label="Your Question in details" value=""></paper-textarea>
<paper-dropdown-menu label="Select a Category">
<paper-listbox class="dropdown-content">
<paper-item>allosaurus</paper-item>
<paper-item>brontosaurus</paper-item>
<paper-item>carcharodontosaurus</paper-item>
<paper-item>diplodocus</paper-item>
</paper-listbox>
</paper-dropdown-menu>
<paper-input label="Tags (Setarate with (,) Comma)"></paper-input>
<paper-button raised>Cancel</paper-button>
<paper-button raised class="green" style="float:right" id="add" on-tap="add">Ask</paper-button>
<paper-input label="username">
<iron-icon icon="mail" prefix></iron-icon>
<div suffix>@email.com</div>
</paper-input>
</div>
</template>
<template is="dom-if" if="[[!user]]">
<div class="card">
<div class="circle">2</div>
<h1>Hello unknown user</h1>
<p>Ut labores minimum atomorum pro. Laudem tibique ut has.</p>
<p>Lorem</p>
</div>
</template>
</template>
<script>
Polymer({
is: 'my-ask',
properties: {
uid: String,
questions: {
type: Object
}
},
add: function() {
this.$.query.ref.push({
content: this.$.qbody.value
});
this.$.qbody.value = null;
}
});
</script>
</dom-module>
这是＆＃34; my-app.html＆＃34;
中的代码<firebase-app
id="lore-970d3"
auth-domain="lore-970d3.firebaseapp.com"
database-url="https://lore-970d3.firebaseio.com/"
api-key="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
>
</firebase-app>
＆＃34; my-app.html＆＃34;
的完整代码
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-selector/iron-selector.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../polymerfire/polymerfire.html">
<link rel="import" href="../bower_components/polymerfire/firebase-app.html">
<link rel="import" href="my-icons.html">
<link rel="import" href="my-fab.html">
<dom-module id="my-app">
<template>
<style>
:host {
--app-primary-color: #4285f4;
--app-secondary-color: black;
display: block;
}
app-header {
color: #fff;
background-color: var(--app-primary-color);
}
app-header paper-icon-button {
--paper-icon-button-ink-color: white;
}
.drawer-list {
margin: 0 20px;
}
.drawer-list a {
display: block;
padding: 0 16px;
text-decoration: none;
color: var(--app-secondary-color);
line-height: 40px;
}
.drawer-list a.iron-selected {
color: black;
font-weight: bold;
}
</style>
<firebase-app
id="lore-970d3"
auth-domain="lore-970d3.firebaseapp.com"
database-url="https://lore-970d3.firebaseio.com"
api-key="xxxxxxxxxxxxxxxxxx"
>
</firebase-app>
<app-location route="{{route}}"></app-location>
<app-route
route="{{route}}"
pattern="/:page"
data="{{routeData}}"
tail="{{subroute}}"></app-route>
<app-drawer-layout fullbleed>
<!-- Drawer content -->
<app-drawer id="drawer">
<app-toolbar>Menu</app-toolbar>
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="home" href="/home">Home</a>
<a name="view1" href="/view1">View One</a>
<a name="view2" href="/view2">View Two</a>
<a name="view3" href="/view3">View Three</a>
</iron-selector>
</app-drawer>
<!-- Main content -->
<app-header-layout has-scrolling-region>
<app-header condenses reveals effects="waterfall">
<app-toolbar>
<paper-icon-button icon="my-icons:menu" drawer-toggle></paper-icon-button>
<div main-title>My App</div>
</app-toolbar>
</app-header>
<my-fab></my-fab>
<iron-pages
selected="{{page}}"
attr-for-selected="name"
fallback-selection="view404"
role="main">
<my-home name="home"></my-home>
<my-ask name="ask"></my-ask>
<my-profile name="profile"></my-profile>
<my-view1 name="view1"></my-view1>
<my-view2 name="view2"></my-view2>
<my-view3 name="view3"></my-view3>
<my-view404 name="view404"></my-view404>
</iron-pages>
</app-header-layout>
</app-drawer-layout>
</template>
<script>
Polymer({
is: 'my-app',
properties: {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged',
},
},
observers: [
'_routePageChanged(routeData.page)',
],
_routePageChanged: function(page) {
this.page = page || 'home';
if (!this.$.drawer.persistent) {
this.$.drawer.close();
}
},
_pageChanged: function(page) {
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
this.importHref(resolvedPageUrl, null, this._showPage404, true);
},
_showPage404: function() {
this.page = 'view404';
},
});
</script>
</dom-module>