Question

我正在使用最新的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>

我已导入

<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-dialog-behavior/paper-dialog-behavior.html">

在＆＃34; my-app.html＆＃34;

已安装：

bower install --save PolymerElements/paper-dialog
bower install --save PolymerElements/paper-dialog-behavior

有关如何解决此问题的任何想法？

左 - Firefox |对 - Chrome / opera

更新

我有默认的polymer starter kit 2.0项目，并在页面中添加了一些元素。

我使用polymer serve将页面强制转换为localhost：8080

我刚创建了另一个页面：src / my-testpage.html

并添加<my-testpage name="testpage"></my-testpage> 在＆＃34; my-app.html＆＃34;

中翻页

初始代码：

<!--
@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

Answer 1

看起来您可能依赖于named access on the Window object should be avoided。

相反，请使用此代码段中显示的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>

codepen

或者，您可以使用此代码段中显示的tap - 处理程序：

<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>

codepen

更新您的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>

聚合物纸张 - 对话框未显示点击铬

1 个答案: