Question

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

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

推送新项目工作正常，列表已更新。

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

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

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

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

Answer 1

只要扩展变量等于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>

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

1 个答案: