CODEWITHSUNDEEP
listpolymer
gabriela
gabriela

Reputation: 285

Polymer iron-list add item in the list then select the newly added item

I have a list of items listed using iron-list. The items in the iron-list are expandable, for every item there is an edition form.

There is also the possibility of creating a new item by pressing a general 'Add' button. Then, a new item will be added to the list using the method this.push('items', newItem).

The push of the new item works fine, the list is updated.

I would like that after pushing a new item the form corresponding to the item to expand immediately. So when the user want's to create a new item to see the creation form right away.

In order to expand the form for an item I simply grab the index of the iron-list from the DOM (item 0 index 0, item 1, index 1...), then I add a css class that will expand it.

The problem that I have is that between the pushing of the item and the calling of the method that will expand the item, the DOM isn't rendered yet so there is no index in the iron-list corresponding to the newly created item.

Is there a part of the element's lifecycle that I missed? After research I didn't found methods for forcing the rendering of the iron-list or the refresh... Could anyone give me an idea about how to expand the form immediately after pushing the item into the array?

Upvotes: 0

Views: 233

Answers (1)

ShaBANG
ShaBANG

Reputation: 193

This code expands whenever the the expanded variable equals the ID, requires unique IDs, could be name or whatever(I'd advise using whatever your database provides). Automatically expands the object by setting expanded equal to the ID of the recently created object.

<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>

Upvotes: 0

Related Questions