发送属性自定义元素的变化

我开发一个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列。明细卡显示了用户购买的数据的简短版本，信息卡显示了购买的全部数据和规格。在两栏中，我都有一组按钮可以在按下时改变状态（颜色）。即使用户仅输入其中一个，我也想更改这两个自定义元素的颜色。我试图通过数据绑定属性这样做，火的功能，一旦发生变化，但我无法弄清楚如何既自定义元素

任何人都可以帮我实现这个同步？

来源

2017-09-14 Alejandro Flores

其中聚合物的版本？ –

您可以发布小提琴或完整的代码吗？ – Ofisora

你可以创建一个新的组件，比如card-wrapper，并且包含你现在使用的两个组件，在包装器中保持你想要同步的值。并且在你的页面中你将包含wrapper – mishu

基本上做到你的要求，你需要一个顶级父容器，是这样的：

<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>

你应该有两个2张卡，当一个卡在更换物业propColor颜色也许按下按钮，设置新值propColor，应触发改变到母部件ParentCard将通知第二张牌。

来源

2017-09-18 22:36:30

发送属性自定义元素的变化

回答

相关问题