Reload carousel items

I need to reload the items from my carousel (I clicked on an item and a panel gets destroyed, then when I try to go back, I need to rebuild the carousel)

For this I am removing the items of the carousel by doing:

var len = cards.length;
for(var c = 0; c < len;c++)
this.myCarousel[0].items.remove(cards[0]);

then I set the cards again and set the carouse开发者_StackOverflowl items again:

this.myCarousel[0].items.append(cards);
this.doLayout();

but after doing this, the cards dont get set right, they just get written on top of each other, no carousel effect gets done. Also the cards start being drawn under the carousel's toolbar, instead of starting below the toolbar.

The first time when I load the cards it works perfectly (when I build the carousel from scratch), but if I delete the previous cards and add them again, they don't get displayed properly, I hope someone can help me.

Thank you in advance

Do the adding and removing on the carousel itself as it has methods to do this:

this.myCarousel.removeAll();
var items = [];
for (...) {
   items.push(<item def>);
}
this.myCarousel.add(items);
this.carousel.doLayout(); // Force the carousel to re-render
this.myCarousel.scrollToCard(0); // This will send the user back to the first card

If the user was at a different card when you run the above (say, if you put this into an orientation check) then you should return them to the correct card like so:

var curIndex = this.myCarousel.items.items.indexOf(this.myCarousel.layout.activeItem);
// Now do removing and adding
this.myCarousel.scrollToCard(this.myCarousel.items.items[curIndex]);

You have to use the index as the item will be removed.

id should only be used for debugging. There are better ways to resolve a component than use id that can get you into trouble.