0

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

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

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

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

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

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

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

4

1 回答 1

0

每当扩展变量等于 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>
于 2016-04-06T01:12:28.180 回答