class DemoElement extends Polymer.Element {
static get is() { return "demo-element" }
static get properties() {
return {
prop1 : {
type:String,
notify: true,
reflectToAttriubute: true,
}
}
}
}
I couldn't understand the notify and reflectToAttribute settings of a property here. Can anyone please explain with some simple applicable examples?
Notify:
From: https://www.polymer-project.org/2.0/docs/devguide/properties
notify Type: boolean
If true, the property is available for two-way data binding. In addition, an event, property-name-changed is fired whenever the property changes. See Property change notification events (notify) for more information.
From: https://www.polymer-project.org/2.0/docs/devguide/data-system
A notifying property supports upward data flow. By default, properties are non-notifying, and don't support upward data flow.
Means that any changes that the user makes to this property, will be propagated 'upwards' through the dom tree, or 'target to host'
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 Type: boolean
Set to true to cause the corresponding attribute to be set on the host node when the property value changes. If the property value is Boolean, the attribute is created as a standard HTML boolean attribute (set if true, not set if false). For other property types, the attribute value is a string representation of the property value. Equivalent to reflect in Polymer 0.5. See Reflecting properties to attributes for more information.
so in short, reflectToAttribute exists as a performance boost. unless specified as true, polymer avoids manipulating the dom attributes. if specified as true the property will update the dom elements attribute.
iron-checked-element-behavior is propbably the most canonical example of reflecting a property back to an attribute.
Checkboxes in html, in order to meet the specs should have a checked property that appears when checked.
checked: {
type: Boolean,
value: false,
reflectToAttribute: true,
notify: true,
observer: '_checkedChanged'
},
By specifying that checked is reflected to attributes, looking at the demo, https://www.webcomponents.org/element/PolymerElements/iron-checked-element-behavior/demo/demo/index.html
and inspecting using the browser, we can see the state of simple checkbox is updated to checked, when the simple-checkboxes are clicked.
//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;
},
