通過綁定到子元素聚合物1.0

Question

更好的辦法我有以下元素：

<link rel="import" href="../my-control/my-control.html" /> 

<dom-module id="my-page"> 
    <template> 
     <!-- pass the value down to the children element --> 
     <my-control my-property="{{myProperty}}"></my-control> 
    </template> 

    <script> 
     Polymer({ 
     is: 'my-page', 

     properties: { 
      myProperty: { 
       type: String, 
       value: '', 
       reflectToAttribute: true 
      } 
     } 
     }); 
    </script> 
</dom-module> 

這是「孩子」控制

<dom-module id="my-control"> 
    <template> 
     <!-- print the value of the property --> 
     <span>{{myProperty}}></span> 
    </template> 

    <script> 
     Polymer({ 
     is: 'my-control', 

     properties: { 
      myProperty: { 
       type: String, 
       value: '', 
       reflectToAttribute: true 
      } 
     } 
     }); 
    </script> 
</dom-module> 

這是我如何使用它。我這樣做是因爲實際上"my-page"並不真的需要一個屬性，但是"my-control"可以，它包含在"my-page"的DOM中。有沒有其他辦法可以做到這一點？因爲我傳遞了一個模型，而且我必須按屬性爲每個屬性反序列化它？

<link rel="import" href="/my-page/my-page.html" /> 

<!-- declare parent element and value --> 
<my-page my-property="ABCDE-12345"></my-page> 

Answer 1

你的問題表達了爲了通過給孩子傳遞屬性重新聲明父一子屬性的關注。實際上，如果父項完全未使用父項（除非父項的用戶需要在該屬性上進行雙向數據綁定），則無需在父項中重新聲明屬性。

以下是聲明性示例，在父項中省略了屬性重新聲明。

<dom-module id="x-foo"> 
    <template> 
    <my-page foo="123"></my-page> 
    </template> 
    <script> 
    Polymer({is: 'x-foo'}); 
    </script> 
</dom-module> 

<dom-module id="my-page"> 
    <template> 
    <my-element foo="[[foo]]"></my-element> 
    </template> 
    <script> 
    // no property declaration needed for one-way binding 
    Polymer({is: 'my-page'}); 
    </script> 
</dom-module> 

codepen

旁註：你不需要設置reflectToAttribute數據綁定。