在 dom-if 元素上添加观察者动态答案

【问题标题】：Add observer dynamic on dom-if element在 dom-if 元素上添加观察者动态
【发布时间】：2019-12-09 19:36:44
【问题描述】：

1) 如果我想在 dom-if 条件下选择元素并运行观察者，我该如何实现该场景，即我有下拉列表，它包含在 dom-if 和页面加载时，一些观察者正在将标志更改为 true，这会触发dom-if 条件来呈现该下拉列表，但问题是当页面加载时，我在观察者中绑定下拉选项，该选项获取元素 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 则添加观察者方法？

【问题讨论】：

标签： javascript polymer polymer-2.x observers mutation-observers

【解决方案1】：

他是一个使用Polymer-2.x添加、删除选项的示例：

Demo

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-repeat，可以使用dom-if元素。但这会产生更多的代码行，这就是我这样做的原因。我可以很快改变它@TapanDave
@TapanDave 嘿，您要找的是上面的方式吗？（查看演示和上面的代码。它与observer 和dom-if 一起使用）