Полимер - Как убрать предмет из железного списка?

Question

Этот живой фрагмент создает веб-компонент, который использует iron-list, У каждого элемента в списке есть кнопка удаления, которая при нажатии удаляет элемент из списка. При удалении элемента все последующие элементы сдвигаются вверх, но последний отображаемый элемент остается, а не исчезает, как и должно быть.

Согласно этому стеку, просто запуская событие resize в железном списке должно хватить. Но в моем фрагменте это не помогает. Пустота iron-resize или функция notifyResize от официального iron-list документация

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>

<link rel="import"  href="https://polygit.org/components/polymer/polymer-element.html">
<link rel="import"  href="https://polygit.org/components/iron-list/iron-list.html">
<link rel="import"  href="https://polygit.org/components/paper-button/paper-button.html">

<dom-module id="my-list">
  <template>

    <iron-list id="list" items="{{items}}">
      
      <template>
        <div style="display:flex; justify-content: space-between; align-items: center;">
          
          <div style="margin: 20px; ">
            {{item}}
          </div>
          
          <paper-button on-tap="_onDeleteClicked"
          style="background: red; color: white;">Remove</paper-button>
        </div>
      </template>
      
    </iron-list>
  
  </template>
  
  <script>
    class MyList extends Polymer.Element {
      static get is() { return "my-list"; }
      
      // set this element's employees property
      constructor() {
        super();
        this.items = [1,2,3,4]; 
      }
      
      _onDeleteClicked(event){
        this.splice("items", event.model.index, 1);
        
        // ---- any resize call doesn't help a thin ---
  this.$.list.fire('iron-resize');
  this.$.list.fire('resize');
  this.$.list.notifyResize();
      }
    }
  customElements.define(MyList.is, MyList);
  </script>

</dom-module>

<my-list></my-list>

Answer 1

"Это просто! Свойство отображения css корневого элемента в шаблоне списка железа не должно быть установлено. Затем просто оберните ваш flexbox в другой простой div".

Вот решенный фрагмент кода:

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-loader.js"></script>

<link rel="import"  href="https://polygit.org/components/polymer/polymer-element.html">
<link rel="import"  href="https://polygit.org/components/iron-list/iron-list.html">
<link rel="import"  href="https://polygit.org/components/paper-button/paper-button.html">

<dom-module id="my-list">
  <template>

    <iron-list id="list" items="{{items}}">
      
      <template>
         <!--YOU MUST NO CHANGE THE CSS DISPLAY PROPERTY OF THE ROOT ELEMENT OF THE TEMPLATE!-->
        <div>

         <div style="display:flex; justify-content: space-between; align-items: center;">
          
          <div style="margin: 20px; ">
            {{item}}
          </div>
          
          <paper-button on-tap="_onDeleteClicked"
          style="background: red; color: white;">Remove</paper-button>
         </div>

        </div>
      </template>
      
    </iron-list>
  
  </template>
  
  <script>
    class MyList extends Polymer.Element {
      static get is() { return "my-list"; }
      
      // set this element's employees property
      constructor() {
        super();
        this.items = [1,2,3,4]; 
      }
      
      _onDeleteClicked(event){
        this.splice("items", event.model.index, 1);
        this.$.list.notifyResize();
      }
    }
  customElements.define(MyList.is, MyList);
  </script>

</dom-module>

<my-list></my-list>

Answer 2

Вы можете найти "скрытый" атрибут на последнем предмете. Поскольку элементы повторно используются в Iron-List при прокрутке, элемент не удаляется. Это правило CSS должно скрывать это

#list [hidden] { display: none; }