Question

我尝试编写一个Web组件来创建一个简单的登录菜单。它具有用于名称和密码的纸张输入以及用于触发脚本以检查数据的按钮。

正确的数据重定向到下一页，而错误的凭据应该在按钮正上方打开一个toast元素，并显示错误消息，与此类似：

http://www.polymer-project.org/tools/designer/#6f21f8d26e14d614c9cb 在树形视图中选择纸质吐司元素，然后选中“打开”复选框，了解我尝试做的事情，请原谅这种奇怪的风格。

问题：我在我的主页面中包含了这个元素，但是toast元素从一开始就始终可见。如果我用css移动吐司，它对按钮点击没有反应。

我不想用我的代码垃圾邮件这个页面，所以我在这里上传了它： https://gist.github.com/Gemoron/6b8f41d1bb6ff522e23c

我很欣赏有关如何解决问题的任何建议。

Answer 1

您不能使用jQuery的$函数直接访问元素的隐藏阴影DOM，也不能使用document.querySelector。无论如何也不需要jQuery。请改为使用Polymer's automatic node finding utility：this.$.paper_toast。
您可以使用this.$.name.inputValue访问纸张输入值。但我更愿意使用数据绑定：<paper-input value={{name}}>。然后，您可以使用this.name访问JavaScript中的输入值。
显示祝酒词的功能是show()。
我无法重现页面加载后烤面包可见的问题。在我的计算机上，当我点击按钮（Chrome 37，Polymer 0.3.3）时，吐司最初被隐藏并显示。

Answer 2

在第76行，您尝试使用＆＃34; open（）＆＃34;纸张吐司上不存在的方法。它应该是＆＃34; show（）＆＃34;。您可以在此处找到paper-toasr API：http://www.polymer-project.org/docs/elements/paper-elements.html#paper-toast

另外，因为封装了shadow dom中的id，所以你应该使用Polymer的id选择机制而不是jquery-style selector

this.$.paper_toast.show();

这里是jsbin（您可能需要刷新，因为jsbin有时会破坏Polymer导入） http://jsbin.com/fened/1/edit