2016-10-03 93 views
1

如何访问聚合物中的父代或其他元素的属性?聚合物:访问父代或其他元素的属性

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

现在我在一个名为“my-element-1”的元素中,如何使用Javascript访问/引用“my-app”中的任何属性?此外,如果我处于“my-element-2”中,是否可以访问/引用“my-element-1”的属性?

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

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

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

但是,每个“页面”并不知道它是否已被选择或不再选择,因为“已选择”属性仅为父项所知。

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

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

+0

一般而言,您应该避免设计元素意识到父母的具体细节。有几种方法可以实现这一点。也许你可以分享一个更详细的设计/使用案例? –

+0

@TomaszPluskiewicz我编辑了我的问题,为您的问题提供答案。 –

+0

我加了一个答案。它按一般条款运作。如果您希望我详细说明任何部分,请告诉我。 –

回答

1

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

2另一个例子并不那么简单。为了保持共享状态,您最近可以使用Polymer's Slack上提到的oxygen-state元素。使用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>?

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