polymer 2.0 : Notify and reflect to attribute

Question

我是这个框架的新手，希望看到一些有用且简单的通知和反射(reflect)属性特性的示例被投入使用。请保持示例简单或为您提供的任何代码添加解释。

Answer 1

通知:

可以设置为 True|False。假设您有 parent-element和 child-element .工作示例

父元素.html:

<dom-module id="parent-element">
  <template>
    <child-element foo="{{test}}"></child-element>
  </template>

  <script>
    Polymer({
      is: "parent-element",
      properties: {
        test: {
          value: "bar"
        }
      }
    })
  </script>
</dom-module>

如您所见，我们有 1 个名为 test 的属性它被传播到子元素，我们可以在其中对其进行操作。

子元素.html:

<dom-module id="child-element">
  <template>
    <paper-input value="{{test}}"></paper-input>
  </template>

  <script>
    Polymer({
      is: 'child-element',

      properties: {
        test: {

        }
      },
    });
  </script>
</dom-module>

发生了什么事？在子元素中我们定义了 test属性，此属性绑定(bind)到 paper-input ，这意味着，每当我们在 paper-input 中写入内容时, 属性会自动更新。 YEE 太棒了，我们不需要处理内部属性的更新 child-element ，但是 parent 如何知道该属性 test已经改变？好吧，他不能。

来了notify: true .设置好了就不用关心通知parent-element在 child-element 的某处, test属性已更改。

很快，属性(property)test在 parent-element和 child-element会同步更新

反射到属性:

正如名字所说，当你将它设置为某个属性时，它的值将在宿主元素的属性中可见。最好在一些例子中展示这一点。

在Polymer我们知道，设置一些绑定(bind)到某些元素的属性需要 $符号。

<custom-elem foo-attribute$="[[someProperty]]"></custom-elem>

嗯，这不能用在任何地方。比方说，我们需要 foo-attribute里面custom-elem .

因为 foo-attribute被声明为属性而不是属性，它的值在元素内部是不可见的。所以我们需要一些属性来表示属性和属性。

所以一些实际情况的工作示例如下:

<dom-module id='parent-element'>
  <template>
    <style>
       child-elemet[foo='bar'] {background-color: green}
       child-element[foo='foo'] {background-color: red}
    </style>
    <child-element foo="{{test}}"></child-element>
  </template>

  <script>
    Polymer({
      is: "parent-element",
      properties: {
        test: {
          value: "bar"
        }
      }
    })
  </script>
</dom-module>

在这种情况下，CSS 将不起作用，因为 foo是属性(不是属性)并且 CSS 仅应用于属性。

为了让它工作，我们必须添加 reflectToAttribute在 foo里面的属性(property)child-element .

<dom-module id='child-element'>
  <template>
    <div>[[foo]]</div>
  </template>

  <script>
    Polymer({
      is: "child-element",
      properties: {
        foo: {
          reflectToAttribute: true
        }
      }
    })
  </script>
</dom-module>

在此之后，foo将成为属性和属性(property)。此时，CSS 将应用于child-element。我们将能够使用 foo 的值里面child-element