在更改时将属性发送到自定义元素

时间:2017-09-14 21:10:08

标签: javascript polymer

我正在使用Polymer开发一个web应用程序。在我的index.html中,我有2个自定义元素,如下面的

...
<body unresolved>
...
    <template is="dom-bind" id="app">
        <detail-card></detail-card>
        <information-card></information-card>
    </template>
...
</body>

两个自定义元素都位于自己的html文件detail-card.htmlinfromation-card.html中,然后导入到索引文件中。 我想要做的是在详细信息卡自定义元素上设置一个属性,一旦它改变了它的值,就可以在信息卡自定义元素上执行另一方的新值。

基本上我有2列。 detail-card显示用户购买数据的简短版本,信息卡显示购买的完整数据和规格。在这两列中,我都有一组按钮,可以在按下时更改状态(颜色)。我想改变两个自定义元素的颜色,即使用户只输入其中一个元素。我试图通过数据绑定属性并在函数更改后触发函数来实现此目的但我无法弄清楚如何同步两个自定义元素

任何人都可以帮助我实现这个目标吗?

1 个答案:

答案 0 :(得分:1)

基本上做你要求你需要一个顶级父容器, 类似的东西:

Object.create

你应该在两张卡中都有另一个属性propColor, 当你在其中一张卡片中改变颜色时可能会按下按钮, 将新值设置为propColor,该值应触发对父组件ParentCard的更改,该组件将通知第二张卡。