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>

这是＆＃34;孩子＆＃34;控制

<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。

在Polymer 1.0中将绑定传递给子元素的更好方法

1 个答案: