聚合物鐵列表添加列表中的項目，然後選擇新添加的項目

我有列表中使用iron-list列出的項目。 iron-list中的項目是可擴展的，因爲每個項目都有一個版本表單。聚合物鐵列表添加列表中的項目，然後選擇新添加的項目

也可以通過按下一般的「添加」按鈕來創建新項目。然後，使用this.push（'items'，newItem）方法將新項目添加到列表中。

推新的項目工作正常，列表更新。

我想在推新物品後立即展開對應該物品的表單。所以當用戶想要創建一個新的項目來立即看到創建表單。

爲了擴展項目的表單，我只需從DOM（item 0 index 0，item 1，index 1 ...）中獲取iron-list的索引，然後添加一個css類，它將展開它。

我遇到的問題是，在推送項目和調用將擴展項目的方法之間，DOM沒有呈現，因此在新列表中沒有與新對應的索引創建的項目。

我錯過了元素生命週期的一部分嗎？經過研究，我沒有找到方法來強制呈現鐵列表或刷新... 任何人都可以給我一個關於如何在將項目推入數組後立即展開表單的想法？

來源

2016-04-04 gabriela

請添加一些代碼，說明您試圖完成什麼，並允許重現您的問題。 –

嗨Gunter，cody的複製非常複雜...基本上我想知道是否有一種方法來等待DOM的渲染，然後觸發一個鼠標點擊事件 – gabriela

如果添加它太複雜對於這個問題，甚至更可能是讓閱讀你的問題的人理解它的複雜方式，特別是沒有看到你的代碼。儘量減少它到一個適合你的問題的簡單的例子。我也不明白你的意思是「等待DOM的渲染，然後觸發鼠標點擊事件」。 –

只要擴展變量等於ID，需要唯一ID，可以是名稱或任何其他數據（我建議使用您的數據庫提供的任何內容），此代碼將進行擴展。通過將展開設置爲等於最近創建的對象的ID來自動擴展對象。

<dom-module id="my-list"> 
    <template> 
    <iron-list items="{{myItems}}"> 
     <my-item 
      on-tap="select" 
      expaned="[[areEqual(item.id, expanded]]"> 
      [[item.name]] 
     </my-item> 
    </iron-list> 
     .... add stuff .... 
    </template> 
</dom-module> 
<script> 
    (function() { 
    Polymer({ 
     is: 'my-list', 

     properties: { 
      expanded: { 
      type: string, 
      value: "" 
      } 
     }, 
     onAdd: function(adding){ 
     ... adding code... 
     this.expanded = this.adding.id; 
     }, 

     areEqual: function(a, b){ 
     return a === b; 
     }, 

     select: function(e){ 
     this.expanded = e.model.id; 
     } 
     }) 
    }()) 
</scipt>

來源

2016-04-06 01:12:28 ShaBANG

謝謝ShaBANG的迴應。我正在使用ID擴展項目，但我的列表有超過1000個項目。當iron-list創建列表時，它會創建20個項目（20個ID），當我們在列表中滾動時，這些項目將被重用。因此，如果我在列表的末尾滾動（項目1000帶有數據庫1000中的id）並嘗試使用id擴展它，它將無法工作，因爲鐵鏈表要求爲19而不是1000. 我發現解決方案在文件selection.html中的iron-list的演示源代碼中。在那裏，爲了選擇一個項目而不是使用他們使用e.model.item的ID。這解決了我的問題:) – gabriela

聚合物鐵列表添加列表中的項目，然後選擇新添加的項目

回答

相關問題