通过绑定到子元素聚合物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数据绑定。