onclick="animated.open()" 在 Polymer 元素中不起作用

Question

我有一个关于 onclick="animated.open()" 的问题。我尝试实现 paper-dialog 元素，我希望在单击 paper-fab 后打开对话框。

<paper-fab icon="create" onclick="animated.open()"></paper-fab>

<paper-dialog id="animated" entry-animation="scale-up-animation" exit-animation="fade-out-animation" with-backdrop>
  <h2>Dialog Title</h2>
  <p>Some text here</p>
</paper-dialog>

根据 paper-dialog docs 这应该可行，但是，它不可行。通过单击 paper-fab，控制台中会弹出一个错误：

Uncaught ReferenceError: animated is not defined

我的假设是它不起作用，因为所有这些都在自定义元素中。有人知道解决方法吗？我已经尝试使用 addEventListener 但这似乎也不起作用。

提前致谢，
斯特凡

Answer 1

这是因为您没有正确访问 paper-dialog 元素。您将需要创建一个从 paper-fab 元素上的 on-click 事件调用的函数，该函数获取对 paper-dialog 元素的引用。有关详细信息，请参阅 here。

例如：

<paper-fab icon="create" on-click="openDialog"></paper-fab>

然后定义你的函数openeDialog:

openDialog: function () {
  this.$.animated.open();
}

编辑这是一个plnkr演示。

onclick="animated.open()" 在 Polymer 元素中不起作用

onclick="animated.open()" not working inside Polymer elements

polymer

polymer-1.0