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

时间:2016-10-03 00:37:15

标签: javascript polymer

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

例如,我最顶层的元素是“my-app”。

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

此外,如果我在“my-element-2”中,我是否可以访问/引用“my-element-1”的属性?

编辑:我想要做到这一点有很多原因,我当然相信有更好的方法而不是必须这样做。但是,我不知道方法。

1:首先想到的用例是我使用“iron-pages”,它位于父元素中。因此,每个“页面”都是该父母的孩子。

父母肯定知道哪个“页面”被“选中”,因为“铁页”是父母的财产。

但是,每个“页面”都不知道它是被选中还是不再被选中,因为“selected”属性仅为父母所知。

在这个用例中,我只想在“页面”中知道它是否仍然被选中。

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

1 个答案:

答案 0 :(得分:1)

1在与iron-pages类似的封闭式父子对中,您可以利用selectedAttributeselectedClass属性。通过设置其中一个,您可以让孩子“知道”它已被选中。

2另一个例子并非如此简单。为了保持共享状态,您可以使用最近在Polymer的Slack中提到的oxygen-state元素。 iron-meta可以使用类似的解决方案来访问全局变量。

应用程序范围内连接元素的更强大的解决方案是Flux pattern。它似乎是一个类似问题的解决方案 - 页面上元素之间的通信。如果元素要自由交流,它很快就会变得笨拙。您可以阅读有关SO的一些相关问题:Flux architecture with polymer elementsBinding to global variables in PolymerPolymer 1.0: How to pass an event to a child-node element without using <iron-signals>?

简化这一过程是使用事件来通知任何感兴趣的元素,使其更改应用程序中的其他位置。一种天真的方式是监听document上的事件。然后还有iron-signals元素。