Polymer 2.0カスタム要素のプロパティを理解できません。

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

は通知：から

：ブール

trueの場合、プロパティは結合双方向のデータのために利用可能である：https://www.polymer-project.org/2.0/docs/devguide/properties

は、タイプを通知します。さらに、プロパティーが変更されると、プロパティー名が変更されたイベントが発生します。詳細については、プロパティー変更通知イベント（通知）を参照してください。

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

通知プロパティは、上向きデータ・フローをサポートしています。デフォルトでは、プロパティは非通知であり、上向きのデータフローはサポートされません。

「ホストするために、ターゲットのユーザーがこのプロパティに対して行うすべての変更は、DOMツリーを「上向き」に伝播されることを意味し、または

例えば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にブール

セット。プロパティ値がブール値の場合、属性は標準のHTMLブール値属性として作成されます（trueの場合に設定され、falseの場合は設定されません）。他のプロパティタイプの場合、属性値はプロパティ値の文字列表現です。ポリマー0.5に反映するのと同等です。詳細については、「属性へのプロパティの反映」を参照してください。

つまり、reflectToAttributeがパフォーマンスの向上として存在します。真であると指定されない限り、ポリマーはdom属性を操作しません。 trueと指定すると、プロパティはdom要素の属性を更新します。

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

鉄確認-要素行動propbablyバック属性にプロパティを反映する最も標準的な例です。

チェックボックスをオンにすると、表示されるチェックされたプロパティを持つ必要があります。デモを見て、属性に反映されているチェックをその指定することにより

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; 
    },