Polymer - Wie man einen Gegenstand aus der Eisenliste entfernt?

Question

Dieses Live-Snippet erstellt eine Webkomponente, die iron-list verwendet. Jedes Element in der Liste hat eine Schaltfläche zum Löschen, die beim Klicken das Element aus der Liste entfernt. Wenn ein Gegenstand entfernt wird, werden alle nächsten Gegenstände nach oben verschoben, aber das zuletzt angezeigte Objekt bleibt erhalten und verschwindet nicht wie es sein sollte.

Nach this stackoverflow, einfach durch Auslösen des Ereignisses resize auf der Eisen-Liste sollte genug sein. Aber in meinem Schnipsel hilft das nicht. Nether die iron-resize oder die notifyResize-Funktion von der offiziellen iron-listdocumentation.

<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 --- 
 
\t \t this.$.list.fire('iron-resize'); 
 
\t \t this.$.list.fire('resize'); 
 
\t \t this.$.list.notifyResize(); 
 
     } 
 
    } 
 
    customElements.define(MyList.is, MyList); 
 
    </script> 
 

 
</dom-module> 
 

 
<my-list></my-list>

Answer 1

„Es ist ganz einfach! Die CSS-Eigenschaft display des Stammelements, in der Eisen-Liste der Vorlage, darf nicht eingestellt werden. Dann wickeln Sie einfach Ihre Flexbox in einem anderen einfach div. "

...

WO LIEGT ES IN DER FUC SAID *** G IRON-LISTE DOKUMENTATION ??!

Hier ist der Live-Schnipsel gelöst:

<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

Sie einen "hidden" -Attribut auf dem letzten Punkt finden. Da Gegenstände beim Blättern durch die Eisenliste wiederverwendet werden, wird der Gegenstand nicht entfernt. Diese CSS Regel sollte es weg verstecken

#list [hidden] { display: none; }