Polymer - アイアンリストからアイテムを取り除くには？

Question

このライブスニペットは、iron-listを使用するWebコンポーネントを構築します。リストの各項目には削除ボタンがあり、クリックするとその項目がリストから削除されます。 アイテムが削除されると、次のアイテムはすべて上に移動しますが、最後に表示されたアイテムは表示されなくなります。

this stackoverflowによると、単に鉄リストにイベントresizeを発射するだけで十分です。しかし、私のスニペットでは、これは役に立たない。 Nether iron-resizeまたは公式のnotifyResize関数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

「それは簡単です！ルート要素のCSSのdisplayプロパティ、鉄 - リストのテンプレートでは、はを設定してはいけません。それからちょうど別のシンプルな中にあなたのフレキシボックスをラップdiv。 "

... ITはFUC IN *** G 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> 
 
     <!--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

あなたは最後の項目の "隠し" 属性を見つけることができます。項目がスクロールしても削除されないので、アイテムはアイロンリストによって再利用されます。このCSSルールはそれを隠す必要があります

#list [hidden] { display: none; }