發送屬性自定義元素的變化

我開發一個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

發送屬性自定義元素的變化

回答

相關問題