我正在尝试实施一个纸质对话框,当下图中的纸制品被点击时,该对话框将显示出来: my app's main screen
但我无法打开纸质对话框。
我已将纸质对话框实施到我的应用中,如下所示:
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/polymerfire/firebase-query.html">
<link rel="import" href="../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/polymerfire/firebase-auth.html">
<link rel="import" href="shared-styles.html">
<dom-module id="my-view1">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10px;
}
paper-fab{
position:fixed;
right:20px;
bottom:68px;
--paper-fab-keyboard-focus-background:--accent-color;
}
</style>
<firebase-auth
id="auth"
user="{{user}}"
provider=""
status-known="{{statusKnown}}"
on-error="handleError">
</firebase-auth>
<firebase-query
id="query"
path="/posts"
data="{{posts}}">
</firebase-query>
<div class="card">
<h1>Post</h1>
<ul id="post-list">
<template is="dom-repeat" items="[[posts]]" as="post">
<li>
<p class="content">[[post.body]]</p>
</li>
</template>
</ul>
</div>
<paper-fab icon="add" onclick="dialog.open()"></paper-fab>
<paper-dialog id="dialog">
<paper-textarea id="post" label="Write your post here..."></paper-textarea>
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button on-tap="post" id="btnPost" raised class="indigo" hidden$="[[!user]]">Post</paper-button>
</paper-dialog>
</template>
<script>
Polymer({
is: 'my-view1',
properties:{
user:{
type: Object
},
statusKnown:{
type: Object
},
posts: {
type: Object
}
},
post: function() {
this.$.query.ref.push({
"Uid": this.user.uid,
"body": this.$.post.value
});
this.$.post.value = null;
}
});
</script>
</dom-module>
<paper-fab icon="add" onclick="dialog.open()"></paper-fab>
<paper-dialog id="dialog">
<paper-textarea id="post" label="Write your post here..."></paper-textarea>
<paper-button dialog-dismiss>Cancel</paper-button>
<paper-button on-tap="post" id="btnPost" raised class="indigo" hidden$="[[!user]]">Post</paper-button>
</paper-dialog>
此片段摘自此页面上的演示:
https://www.webcomponents.org/element/PolymerElements/paper-dialog/v1.1.0/demo/demo/index.html
但是当我真正点击纸张工厂时,我收到以下错误:
未捕获的ReferenceError:未定义对话框 在HTMLElement.onclick(查看3:1) onclick @ view3:1
有人知道如何在纸张工厂被点击时打开纸张对话框吗?我想我错过了一些包含,但我无法弄清楚哪一个。
答案 0 :(得分:1)
首先,不要使用onclick。有点击或点击等聚合物事件属性。其次,你应该调用将打开所选对话框的函数
示例:
<paper-fab icon="add" on-tap="_openDialog"></paper-fab>
和内部脚本
_openDialog: function() {
this.$.dialog.open();
}
this.$.dialog
找到带有id对话框的元素并调用函数open