在dom-if元素上添加觀察者動態

Question

1）如果我想在dom-if條件下選擇元素並運行觀察器，如何實現該方案，即我將下拉菜單包裹在dom-if內，並且在頁面加載時，某些觀察者將標志更改為true，從而觸發dom-if呈現該下拉菜單的條件，但是問題是當頁面加載時，我在觀察器中綁定了下拉菜單的選項，這些選項獲得元素this.$.elementID || this.$.querySelector('#elementID') this.$.elementID || this.$.querySelector('#elementID')並綁定它，所以我沒有得到該元素，但是在ui中，它顯示了沒有選項的空白下拉列表，所以我猜沒有得到選擇。

請幫忙？

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

要么

2）如何在dom-if條件下在元素上添加動態觀察者方法，如果元素被標記為true，則添加觀察者方法？

Answer 1

他舉一個示例，使用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>

在dom-if元素上添加觀察者動態

問題描述

1 個解決方案

解決方案1
0 2019-08-02 11:30:33

在dom-if元素上添加觀察者動態

問題描述

1 個解決方案

解決方案1 0 2019-08-02 11:30:33

解決方案1
0 2019-08-02 11:30:33