Add observer dynamic on dom-if element
Question
1) If I want to select element on dom-if condition and run observer how can I achieve that scenario ie I have dropdown which is wrapped inside dom-if and on page load some observer is changing flag to true,which trigger dom-if condition to render that dropdown,but the problem is when page loads I bind the options for dropdown in observer which get the element this.$.elementID || this.$.querySelector('#elementID') this.$.elementID || this.$.querySelector('#elementID') and binds it so I am not getting that element but in ui it shows blank dropdown without options so I guess element is not getting selected.
Please help?
<template is="dom-if" if="[[flag]]" restamp="true">
<dropdown id = "elementID"></dropdown>
</template>
JS:
properties:{
list: {
type: Array,
notify: true,
value: [{label:"f1",value:"f1"},{label:"f2",value:"f2"}]
}
}
static get observers() {
return [
'_bindDrop(list)',
];
}
_bindDrop(list) {
const select = this.$.querySelector('#elementID');
if (select) {
select.options.length = 0;
list.forEach(function (item) {
const option = document.createElement('option');
option.textContent = item.label;
option.value = item.value;
select.appendChild(option);
});
}
}
or
2) How to add dynamic observer method on an element in dom-if condition,if element gets flag to true then it adds observer method ?
1 answers
solution1
0 2019-08-02 11:30:33
He an example add, remove options with Polymer-2.x :
window.addEventListener('WebComponentsReady', () => { class XFoo extends Polymer.Element { static get is() { return 'x-foo'; } static get properties() { return { selected:{type:String}, style:{type:String}, list: { type: Array, value() {return [{label:"f1",value:"f1", flag:false},{label:"f2",value:"f2", flag:true},{label:"f3",value:"f3", flag:true}] } } }; } static get observers(){ return ['_toogleSelected(selected)', '_listChanged(list.*)']} _toogleSelected(s){ let objinx = this.list.findIndex(o => o.label === s); let obj = this.list[objinx] obj.flag = !obj.flag; this.set('list.'+objinx, obj) this.notifyPath('list.'+ objinx) } _styleIt(s) { return s? "green;":"red;"; } _listChanged(l){ console.log('List changed', l) } } customElements.define(XFoo.is, XFoo); });
<head> <base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/"> <script src="webcomponentsjs/webcomponents-loader.js"></script> <link rel="import" href="polymer/polymer.html"> <link rel="import" href="paper-dropdown-menu/paper-dropdown-menu.html"> <link rel="import" href="paper-item/paper-item.html"> <link rel="import" href="paper-listbox/paper-listbox.html"> <link rel="import" href="paper-input/paper-input.html"> <link rel="import" href="iron-selector/iron-selector.html"> </head> <body> <x-foo></x-foo> <dom-module id="x-foo"> <template> <paper-dropdown-menu label="Listed Items"> <paper-listbox slot="dropdown-content" > <template is="dom-repeat" items="[[list]]" id="lists" mutable-data> <template is="dom-if" if="[[item.flag]]"> <paper-item >[[item.value]] - [[item.flag]]<paper-item> </template> </template> </paper-listbox> </paper-dropdown-menu> <div>Options display Toogle</div> <iron-selector attr-for-selected="name" selected="{{selected}}" > <template is="dom-repeat" items="[[list]]" mutable-data> <button name="[[item.label]]" id="[[item.label]]" style="background-color:{{_styleIt(item.flag)}}"> [[item.value]]</button> </template> </iron-selector> </template> </dom-module> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.