聚合物铁列表在列表中添加项目然后选择新添加的项目

Question

我有一个使用 Iron-List 列出的项目列表。 铁列表中的项目是可扩展的，每个项目都有一个版本表格。

还可以通过按常规“添加”按钮来创建新项目。然后，将使用 this.push('items', newItem) 方法将新项目添加到列表中。

新商品推送正常，列表已更新。

我希望在推送新项目后，与该项目对应的表单立即展开。因此，当用户想要创建一个新项目时，可以立即看到创建表单。

为了扩展项目的表单，我只需从 DOM 中获取iron-list 的索引（项目 0 索引 0、项目 1、索引 1...），然后添加一个 css 类来扩展它。

我遇到的问题是，在推送项目和调用扩展项目的方法之间，DOM 尚未渲染，因此铁列表中没有与新创建的项目相对应的索引。

我是否错过了元素生命周期的一部分？ 经过研究，我没有找到强制渲染铁列表或刷新的方法...... 谁能告诉我如何在将项目推入数组后立即展开表单？

Answer 1

只要扩展的变量等于 ID，需要唯一的 ID，可以是名称或其他内容（我建议使用数据库提供的任何内容），此代码就会扩展。 通过将 Expanded 设置为等于最近创建的对象的 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>