javascript - Polymer:访问父元素或其他元素的属性

Question

如何访问 Polymer 中父元素或其他元素的属性？

例如，我最上面的元素是“my-app”。

现在我位于一个名为“my-element-1”的元素中，如何使用 Javascript 访问/引用“my-app”中的任何属性？

此外，如果我在“my-element-2”中，我是否能够访问/引用“my-element-1”的属性？

编辑:我想要这样做的原因有很多，而且我当然相信有比这样做更好的方法。但是，我不知道方法。

1:我想到的第一个用例是我使用“iron-pages”，它位于父元素中。因此，每个“页面”都是该父级的子级。

父级肯定知道哪个“页面”被“选择”，因为“iron-pages”是父级的属性。

但是，每个“页面”不知道它是否被选中或不再被选中，因为“selected”属性只有父级知道。

在这个用例中，我只想能够从“页面”内部知道它是否仍然被选中。

2:第二个用例可能是通用设计模式。我想维护一组全局属性，然后可以从 Polymer 应用程序中的任何位置访问这些属性。我的假设是它应该作为根元素存储在“my-app”中。

Answer 1

1 在封闭的父子对(例如 iron-pages)中，您可以利用 selectedAttribute和 selectedClass特性。通过设置其中之一，您可以让 child “知道”它已被选中。

2 另一个例子就没那么简单了。为了保持共享状态，您可以使用 oxygen-state最近在 Polymer 的 Slack 上提到的元素。 iron-meta 可以提供类似的解决方案它允许您访问全局变量。

在应用程序范围内连接元素的更强大的解决方案是 Flux pattern 。它的出现是为了解决类似的问题——页面上元素之间的通信。如果元素要自由通信，它很快就会变得笨拙。您可以在SO上阅读许多相关问题:Flux architecture with polymer elements , Binding to global variables in Polymer , Polymer 1.0: How to pass an event to a child-node element without using <iron-signals>?

对此的一种简化是使用事件来通知应用程序中其他地方的更改的任何感兴趣的元素。一种简单的方法是监听文档上的事件。然后还有iron-signals元素。