我正在使用最新的polymer starter kit 2.0,我在下面有这个代码,并尝试打开对话框但是在chrome中没有任何反应(它在Firefox中正常工作):
<paper-fab icon="zoom-in" onclick="dialog.open()"></paper-fab>
<paper-dialog id="dialog">
<h3>text</h3>
<div class="buttons">
<paper-button dialog-confirm>Close</paper-button>
</div>
</paper-dialog>
I've imported
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-dialog-behavior/paper-dialog-behavior.html">
在“my-app.html”中
And installed:
bower install --save PolymerElements/paper-dialog
bower install --save PolymerElements/paper-dialog-behavior
关于如何解决这个问题的任何想法?
左 - Firefox |对 - Chrome / opera
UPDATE:
我有默认的polymer starter kit 2.0项目,并在页面中添加了一些元素 .
我正在使用 polymer serve
将页面强制转换为localhost:8080
我刚刚创建了另一个页面:src / my-testpage.html
并在"my-app.html"中添加了 <my-testpage name="testpage"></my-testpage>
铁页
Initial code:
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<dom-module id="my-testpage">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10%;
padding-left: 20%;
padding-right: 20%;
}
</style>
<paper-fab icon="zoom-in" onclick="dialog.open()"></paper-fab>
<paper-dialog id="dialog">
<h3>text</h3>
<div class="buttons">
<paper-button dialog-confirm>Close</paper-button>
</div>
</paper-dialog>
</template>
<script>
Polymer({
is: 'my-testpage'
});
</script>
</dom-module>
结果:适用于Firefox和EDGE,在基于铬的浏览器中不起作用 - Chrome / Opera:
Console shows:
testpage:1
Uncaught ReferenceError: dialog is not defined
onclick @ testpage:1
Suggested solution 1:
请改用: onclick="document.getElementById('dialog').open()
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<dom-module id="my-testpage">
<template>
<style include="shared-styles">
:host {
display: block;
padding: 10%;
padding-left: 20%;
padding-right: 20%;
}
</style>
<paper-fab icon="zoom-in" onclick="document.getElementById('dialog').open()"></paper-fab>
<paper-dialog id="dialog">
<h3>text</h3>
<div class="buttons">
<paper-button dialog-confirm>Close</paper-button>
</div>
</paper-dialog>
</template>
<script>
Polymer({
is: 'my-testpage'
});
</script>
</dom-module>
结果:适用于Firefox和EDGE,在基于铬的浏览器中不起作用 - Chrome / Opera: Console shows:
testpage:1
Uncaught TypeError: Cannot read property 'open' of null
onclick @
Suggested solution 2:
<!--
@license
Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="shared-styles.html">
<dom-module id="my-testpage">
<template is="dom-bind" id="t">
<style include="shared-styles">
:host {
display: block;
padding: 10%;
padding-left: 20%;
padding-right: 20%;
}
</style>
<paper-fab icon="zoom-in" on-tap="openDialog"></paper-fab>
<paper-dialog id="dialog">
<h3>text</h3>
<div class="buttons">
<paper-button dialog-confirm>Close</paper-button>
</div>
</paper-dialog>
<script>
var t = document.getElementById('t');
t.openDialog = function() {
t.$.dialog.open();
};
</script>
</template>
<script>
Polymer({
is: 'my-testpage'
});
</script>
</dom-module>
结果:
.polymer-micro.html.js:265:1
[my-testpage::_createEventHandler]: listener method `openDialog` not defined
1 回答
看起来你可能依赖于named access on the Window object,其中should be avoided .
相反,请使用
document.getElementById('dialog')
,如以下代码段所示:codepen
或者,您可以使用
tap
-handler,如下面的代码段所示:codepen
UPDATE 您的Polymer元素代码应如下所示: