Polymer 2.0: Notify and reflect to attribute

I'm new to this framework and would love to see some useful and simple examples of notify and reflect to attribute properties being put to use. Please keep the examples simple or add explanation for whatever code you provide.

回答1:

Notify:

can be set to True|False. Let's say you have parent-element and child-element. Working example

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

As you can see, we have 1 property called test which is propagated to child element, where we can manipulate with it.

child-element.html:

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

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

      properties: {
        test: {

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

What is hapenning? In child element we defined test property and this property is binded to paper-input, which means, whenever we write something in paper-input, the property updates itself automatically . YEE that's awesome, we don't need to take care of updating property inside child-element, but HOW can parent know that property test has changed? Well, he can't.

And here comes notify: true. If you set it up, you don't have to care about notifying parent-element that somewhere inside of the child-element, test property has been changed.

Shortly, property test in parent-element and child-element will updates simultaneously

Reflect-to-attribute:

As name already says, when you set this to some property, it's value will be visible in attribute of host element. Better to show this on some example.

In Polymer we know, that setting some binding to attribute of some element needs $ sign.

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

Well, this can't be used everywhere. Let's say, that we need foo-attribute inside custom-elem.

Becuase foo-attribute was declared as attribute and not property, it's value won't be visible inside of element. So we need something where some attribute will represent attribute and also property.

So some working example, with some real situation would be like:

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

In this case, CSS won't work, because foo is property (not an attribute) and CSS is applied on attributes only.

To make it work, we have to add reflectToAttribute on foo property inside child-element.

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

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

After this, foo will become attribute and also property. At this moment, CSS will be applied on child-element and we will be able to work with value of foo inside child-element

回答2:

From the docs: https://www.polymer-project.org/1.0/docs/devguide/data-binding

To bind to an attribute, add a dollar sign ($) after the attribute name:

<div style$="color: {{myColor}};">

Two-way bindings ... property must be set to notify: true.