我正在使用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.html
和infromation-card.html
中,然后导入到索引文件中。我要做的是在明细卡自定义元素上设置一个属性,一旦它更改其值,就在信息卡自定义元素上执行功能,而新值在另一侧。
基本上我有2列。详细信息卡显示了用户购买的数据的简短版本,信息卡显示了购买的完整数据和说明。在这两列中,我都有一组按钮,这些按钮在按下时会更改状态(颜色)。我想更改两个自定义元素的颜色,即使用户仅在其中之一中输入内容。我试图通过数据绑定属性来执行此操作,并在功能更改后触发函数,但是我不知道如何同步两个自定义元素
谁能帮我实现这一目标?
最佳答案
基本上,按照您的要求,您需要一个顶级父容器,
就像是:
<dom-module id="parent-card">
<template>
<detail-card prop-color="{{propColor}}"></detail-card>
<information-card prop-color="{{propColor}}"></information-card>
</template>
</dom-module>
<script>
class ParentCard extends Polymer.Element {
static get is() {
return 'parent-card';
}
static get properties() {
return {
propColor: {
type: String,
notify: false
}
};
}
}
window.customElements.define(ParentCard.is, ParentCard);
</script>
两张卡中都应具有另一个属性propColor,
在其中一张卡片上更改颜色时,可能会按下按钮,
将新值设置为propColor,这将触发对父组件ParentCard的更改,该更改将通知第二张卡。