Question

class DemoElement extends Polymer.Element {
  static get is() { return "demo-element" }
  static get properties() {
    return {
      prop1 : {
        type:String,
        notify: true,
        reflectToAttriubute: true, 
      }
    }
  }
}

我在这里无法理解属性的通知和 reflectToAttribute 设置。有人可以用一些简单的适用例子来解释吗？

Answer 1

<强>通知：

来自：https://www.polymer-project.org/2.0/docs/devguide/properties

通知类型：布尔值

如果为true，则该属性可用于双向数据绑定。此外，只要属性发生更改，就会触发property-name-changed事件。有关详细信息，请参阅属性更改通知事件（通知）。

来自：https://www.polymer-project.org/2.0/docs/devguide/data-system

通知属性支持向上数据流。默认情况下，属性是非通知的，不支持向上数据流。

表示用户对此属性所做的任何更改都将通过dom树“向上”传播，或“目标转移到主机”

e.g。 https://www.polymer-project.org/2.0/docs/devguide/data-system

<script>
  class XTarget extends Polymer.Element {

    static get is() {return 'x-target';}

    static get properties() {
      return {
        someProp: {
          type: String,
          notify: true
        }
      }
    }

  }

  customElements.define(XTarget.is, XTarget);
</script>
...

<dom-module id="x-host">
  <template>
    <!-- changes to "value" propagate downward to "someProp" on target -->
    <!-- changes to "someProp" propagate upward to "value" on host  -->
    <x-target some-prop="{{value}}"></x-target>
  </template>
  <script>
    class XHost extends Polymer.Element {

      static get is() {return 'x-host';}

    }

    customElements.define(XHost.is, XHost);
  </script>

<强> ReflectToAttribute

reflectToAttribute类型：布尔值

设置为true可在属性值更改时在主机节点上设置相应的属性。如果属性值为Boolean，则将属性创建为标准HTML布尔属性（如果为true则设置，如果为false则不设置）。对于其他属性类型，属性值是属性值的字符串表示形式。相当于反映在聚合物0.5中。有关详细信息，请参阅将属性反映到属性。

简而言之，reflectToAttribute作为性能提升而存在。除非指定为true，否则聚合物避免操纵dom属性。如果指定为true，则属性将更新dom元素属性。

https://github.com/PolymerElements/iron-checked-element-behavior/blob/master/iron-checked-element-behavior.html

iron-checked-element-behavior可能是将属性反映回属性的最典型示例。

html中的复选框，为了满足规范，应该有一个选中时出现的已检查属性。

   checked: {
        type: Boolean,
        value: false,
        reflectToAttribute: true,
        notify: true,
        observer: '_checkedChanged'
      },

通过指定已检查的内容反映到属性，查看演示https://www.webcomponents.org/element/PolymerElements/iron-checked-element-behavior/demo/demo/index.html

并使用浏览器进行检查，当点击简单复选框时，我们可以看到简单复选框的状态已更新为已检查。

https://github.com/PolymerElements/iron-checked-element-behavior/blob/master/demo/simple-checkbox.html:L32

//L32
<input type="checkbox" id="checkbox" on-tap="_onCheckTap">
//...
//this.checked is inherited from L43
      behaviors: [Polymer.IronCheckedElementBehavior],
//...
//L53
  _onCheckTap: function() {
    this.checked = this.$.checkbox.checked;
  },

无法理解Polymer 2.0自定义元素属性？

1 个答案: