Polymer 聚合物组分不相互独立？

考虑到这个简化的组件：

<dom-module id="poly-component">
<template>
    <paper-button raised onclick="dialog.open()">Button</paper-button>
    <paper-dialog id="dialog"><h1>Paper Dialog Here!</h1></paper-dialog>
</template>
<script>
    Polymer({
        is: 'poly-component'
    })
</script>

我错过什么了吗

---

此示例的代码可以在此处找到：

您的代码无法工作，因为您没有正确绑定事件处理程序

像

onclick

这样的内置处理程序尝试在不存在

dialog

的全局范围内执行代码位。因此出现了错误

下面是重写代码的方法

<dom-module id="poly-component">
  <template>
    <paper-button raised on-click="_dialogOpen">Button</paper-button>
    <paper-dialog id="dialog"><h1>Paper Dialog Here!</h1></paper-dialog>
  </template>
  <script>
    Polymer({
        is: 'poly-component',
        _dialogOpen: function() {
          this.$.dialog.open();
        }
    })
  </script>
</dom-module>

按钮
纸张对话框在这里！
聚合物({
是：'多组分'，
_dialogOpen:function（）{
此.dialog.open（）；
}
})

首先，注意点击聚合物时，

onclick

如何更改为

。PS.
点击
事件

其次，您只能从代码中访问其他元素。不直接在绑定中。因此，
\u对话框打开
功能

更新

好的，我知道发生了什么。当只有一个元素具有给定的
id
，浏览器允许您在全局范围内仅通过该id使用它

当您使用shadydom时（我假设您使用shadydom），您的
poly组件
元素的两个实例将呈现两个
。此时，
窗口。对话框
不再可用

同样，对于Polymer，使用
this.$
符号aka引用本地DOM中的元素更安全。
顺便问一下，你是说
的单个实例工作正常吗？是的！我在的演示代码中找到了：请查看我答案的更新
(index):1 Uncaught TypeError: dialog.open is not a function

<dom-module id="poly-component">
  <template>
    <paper-button raised on-click="_dialogOpen">Button</paper-button>
    <paper-dialog id="dialog"><h1>Paper Dialog Here!</h1></paper-dialog>
  </template>
  <script>
    Polymer({
        is: 'poly-component',
        _dialogOpen: function() {
          this.$.dialog.open();
        }
    })
  </script>
</dom-module>