My playlist features artwork images that can be clicked. Upon clicking an image, the current track is replaced by the new selection in the array.
An issue arises when Ember re-renders the items, causing a brief moment where the replaced element disappears and everything shifts positions, resulting in an unappealing effect.
To see this effect firsthand, visit
- Go to
- Click on one of the three playlist-images
This is my simplified controller:
import Ember from 'ember';
export default Ember.ArrayController.extend({
playlist: null,
currentTrack: null;
actions: {
replaceItem: function(){
playlist.replace(index, 1, [self.get("currentTrack")])
}
}
}
This is the template:
{{#each song in playlist}}
<div class="song" {{action "changeTrack" song}}>
<img {{bind-attr src=song.artwork_url}} />
</div>
{{/each}}
EDIT: Despite creating a JSFiddle, I could NOT reproduce the problem using plain jQuery http://jsfiddle.net/bhn8bko1/2/