Kann Polymer 2.0 benutzerdefinierte Elementeigenschaften nicht verstehen?

Question

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

konnte ich nicht verstehen, die benachrichtigen und reflectToAttribute Einstellungen einer Immobilie hier. Kann jemand bitte mit ein paar einfachen Beispielen erklären?

Answer 1

diesen Artikel:

Von: https://www.polymer-project.org/2.0/docs/devguide/properties

Typen mitteilen: boolean

Wenn das stimmt, ist die Eigenschaft für eine Zweiweg-Daten zur Verfügung zu binden. Darüber hinaus wird ein Ereignis mit dem Namen "property-name-changed" ausgelöst, wenn sich die Eigenschaft ändert. Weitere Informationen finden Sie unter Ereignisse zur Benachrichtigung bei Änderung von Eigenschaften (notify).

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

A anmeldenden Eigenschaft unterstützt Aufwärtsdatenfluss. Standardmäßig melden Eigenschaften keine Benachrichtigung und unterstützen keinen Aufwärtsdatenfluss.

bedeutet, dass alle Änderungen, die der Benutzer auf diese Eigenschaft macht, wird ‚nach oben‘ durch den DOM-Baum, oder ‚Ziel Host‘

vermehrt werden z.B. 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 Typ: Wahrheitswert

Sets auf true das entsprechende Attribut zu veranlassen, auf dem Host-Knoten gesetzt werden, wenn der Eigenschaftswert ändert. Wenn der Eigenschaftswert ein Boolescher Wert ist, wird das Attribut als boolesches Standard-HTML-Attribut erstellt (set if true, nicht set, falls false). Bei anderen Eigenschaftstypen ist der Attributwert eine Zeichenfolgendarstellung des Eigenschaftswerts. Äquivalent, um in Polymer 0.5 zu reflektieren. Weitere Informationen finden Sie unter Reflektieren von Eigenschaften für Attribute.

Kurz gesagt, reflectToAttribute existiert als Leistungssteigerung. Sofern nicht als zutreffend angegeben, vermeidet das Polymer die Manipulation der dom-Attribute. Wenn sie als wahr angegeben wird, aktualisiert die Eigenschaft das Attribut dom elements.

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

Eisen-checked-Element-Verhalten propbably das bekannteste Beispiel ist eine Eigenschaft zurück auf ein Attribut zu reflektieren.

Checkboxen in HTML, um die Spezifikationen zu erfüllen, sollten eine geprüfte Eigenschaft haben, die erscheint, wenn sie aktiviert ist.

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

Damit Angabe geprüft wird, um Attribute reflektieren, an der Demo suchen, https://www.webcomponents.org/element/PolymerElements/iron-checked-element-behavior/demo/demo/index.html

und Inspizieren des Browsers verwenden, können wir den Zustand des einfachen Kontrollkästchen sehen wird geprüft aktualisiert, wenn das einfache-Kontrollkästchen sind angeklickt.

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