onclick 内联脚本无法在阴影中引用 id-dom (Polymer v2.0)

Question

<dom-module id="my-element">
  ...
  <button onclick="dialog.open()">What is Confucianism ?</button>

  <paper-dialog id="dialog" modal>
    <h2>Confucianism</h2>
    <p>...</p>
  </paper-dialog>
  ...
</dom-module>

不行。

我正在使用 Polymer v2.0。当我点击按钮时 dialog.open() 失败并显示 dialog is undefined.

在以前版本的 Polymer 中，此代码有效，但现在我已经升级了我的代码，我必须在使用 paper-dialog 元素的所有地方清除此问题。我目前的解决方案是在我的代码中的所有按钮上添加一个 on-click 属性并手动编写一个绑定函数并执行 this.$.<dialogID>.open(); 但我不明白为什么我有这样做，这对我来说似乎是个问题，因为我写了更多乏味的代码，而且这种后来的兼容性似乎更像是新版本的缺点。

我真的做错了吗？

Answer 1

这种做法真的很糟糕。您应该始终调用将打开对话框的函数。另外，您应该使用聚合物事件处理程序。 on-tap 例如。

为什么您的代码不再有效？好吧，这取决于您是否使用阴影 dom。因为在 shadow DOM 中，有 shadowRoots 可以说是关闭的，所以 window 对象不再有 ID 保存为属性的元素。

通常情况下，它是有效的，因为每当您使用某个 ID 定义元素时，该元素都会保存在 window 对象中，这就是您可以执行 <someID>.<someFunction> 的原因。

您一定要重写您的应用，以便它使用聚合物事件处理函数。

编辑：

考虑此功能请求#4647作为未来可靠的解决方案。

onclick 内联脚本无法在阴影中引用 id-dom (Polymer v2.0)

onclick inline script can't reference id in the shadow-dom (Polymer v2.0)

polymer