Лучшего способа передать привязки Into дочернего элемента в Polymer 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" делает и содержится в DOM "my-page". Есть ли другой способ, которым я могу это сделать? Потому что я передаю модель, и мне нужно десериализовать ее в атрибуте по атрибуту для каждого свойства?

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

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

Answer 1

Ваш вопрос выражает заботу повторного объявления детского имущества в родителе, чтобы передать имущество через ребенок. Фактически вам не нужно переопределять свойство в родительском, если он полностью не используется родителем (если только родительские пользователи не требуют двусторонней привязки данных к этому свойству).

Ниже приведен декларативный пример, в котором опускает свойство redeclaration в родительском.

<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

Side Примечание: вам не нужно устанавливать reflectToAttribute для связывания данных.