[英]Add observer dynamic on dom-if element
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')
1)如果我想在dom-if条件下选择元素并运行观察器,如何实现该方案,即我将下拉菜单包裹在dom-if内,并且在页面加载时,某些观察者将标志更改为true,从而触发dom-if呈现该下拉菜单的条件,但是问题是当页面加载时,我在观察器中绑定了下拉菜单的选项,这些选项获得元素
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. this.$.elementID || this.$.querySelector('#elementID')
并绑定它,所以我没有得到该元素,但是在ui中,它显示了没有选项的空白下拉列表,所以我猜没有得到选择。
Please help? 请帮忙?
<template is="dom-if" if="[[flag]]" restamp="true">
<dropdown id = "elementID"></dropdown>
</template>
JS: 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 ? 2)如何在dom-if条件下在元素上添加动态观察者方法,如果元素被标记为true,则添加观察者方法?
He an example add, remove options with Polymer-2.x
: 他举一个示例,使用
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.