[英]Polymer paper-dialog not showing up on click in chrome
我正在使用最新的聚合物入門套件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>
我已經進口了
<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”中
並安裝:
bower install --save PolymerElements/paper-dialog
bower install --save PolymerElements/paper-dialog-behavior
關於如何解決這個問題的任何想法?
左 - Firefox | 對 - Chrome / opera
更新:
我有默認的聚合物入門套件2.0項目,並在頁面中添加了一些元素。
我正在使用polymer serve
將頁面轉換為localhost:8080
我剛剛創建了另一個頁面:src / my-testpage.html
並將<my-testpage name="testpage"></my-testpage>
到“my-app.html”中的鐵頁面
初始代碼:
<!--
@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:
控制台顯示:
testpage:1
Uncaught ReferenceError: dialog is not defined
onclick @ testpage:1
建議的解決方案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: 控制台顯示:
testpage:1
Uncaught TypeError: Cannot read property 'open' of null
onclick @
建議的解決方案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
看起來您可能依賴於Window
對象上的命名訪問 , 應該避免這種訪問 。
相反,請使用document.getElementById('dialog')
,如以下代碼段所示:
<head> <base href="https://polygit.org/polymer+1.9.3/components/"> <script src="webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="polymer/polymer.html"> <link rel="import" href="iron-icons/iron-icons.html"> <link rel="import" href="paper-button/paper-button.html"> <link rel="import" href="paper-fab/paper-fab.html"> <link rel="import" href="paper-dialog/paper-dialog.html"> </head> <body> <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> </body>
或者,您可以使用此代碼段中顯示的tap
-handler:
<head> <base href="https://polygit.org/polymer+1.9.3/components/"> <script src="webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="polymer/polymer.html"> <link rel="import" href="iron-icons/iron-icons.html"> <link rel="import" href="paper-button/paper-button.html"> <link rel="import" href="paper-fab/paper-fab.html"> <link rel="import" href="paper-dialog/paper-dialog.html"> </head> <body unresolved> <template is="dom-bind" id="t"> <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> </template> <script> var t = document.getElementById('t'); t.openDialog = function() { t.$.dialog.open(); }; </script> </body>
更新您的Polymer元素代碼應如下所示:
<dom-module id="my-testpage">
<template>
...
<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>
</template>
<script>
Polymer({
is: 'my-testpage',
openDialog: function() {
this.$.dialog.open();
}
});
</script>
</dom-module>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.