聚合物中的組件之間的雙向綁定

Question

我有一個聚合物應用程序，它具有一些嵌套組件。我試圖在組件中共享一個屬性值。我的想法是，我可以用數據綁定來做到這一點。但是，我的嘗試沒有成功，可以在Plunkr中看到。相關代碼（我認爲）在這裏：

<neon-animated-pages selected="[[selectedPageIndex]]" style="height:100%;"> 
    <view-1 is-enabled="{{ isEnabled }}"></view-1> 
    <view-2 is-enabled="{{ isEnabled }}"></view-2> 
    </neon-animated-pages> 

每個視圖有一個paper-toggle-button。如果切換按鈕設置在一個視圖中，我希望相同的值在其他視圖中顯示。然而，這不是發生了什麼。這就像每個視圖都使用它自己的isEnabled值。作爲Plunkr節目，我已經做了以下內容：

1. 創建了一個名爲isEnabled在每個視圖（「視圖1.HTML」和「視圖2.HTML」）屬性。
2. 創建一個屬性調用的承載組件isEnabled（「shell.html」）
3. 用於雙向通過{{ }}花括號語法結合。

我在做什麼錯？爲什麼isEnabled值不是在一個視圖中傳播給另一個視圖？

謝謝！

Answer 1

在您的意見中，您應該在isEnabled屬性的定義中將notify設置爲true。這是雙向數據綁定所需的（docs）。

Answer 2

首先：爲元素文件命名的方式命名元素。在您的目錄中將shell更改爲app-shell。

二：什麼用戶瑪麗亞說，只是聲明瞭一個notify: true屬性，你希望能夠進行數據綁定，這樣每一個元素：

<dom-module id="view-1"> 
    <template> 
    <h2>View 1</h2> 
    <paper-toggle-button checked="{{ isEnabled }}">Is Enabled?</paper-toggle-button> 
    </template> 

    <script> 
    Polymer({ 
     is: 'view-1', 
     properties: { 
     isEnabled: { 
      type: Boolean, 
      value: false, 
      notify: true 
     } 
     } 
    }); 
    </script> 
</dom-module> 

執行同爲view-2財產。

這是您plunkr有工作的雙向數據綁定：

http://plnkr.co/edit/YhjE02O14YGCErXu9Vtq

希望它可以幫助你。