Ember jquery ui sortable remove item not in sync

@tookien wrote:

component:

export default Ember.Component.extend({

_refreshSortable() {
    this.$().sortable('destroy');
    this.renderSortable();

},
fakeDataChanged: Ember.observer('fakeData.[]', function() {
    Ember.run.scheduleOnce('afterRender', this, this._refreshSortable);

}),

fakeData: [
    Ember.Object.create({id: 1, name: 'test'}),
    Ember.Object.create({id: 2, name: 'test1'}),
    Ember.Object.create({id: 3, name: 'test2'}),
    Ember.Object.create({id: 4, name: 'test3'}),
],

actions: {
    removeItem(item) {
        this.get('fakeData').removeObject(item);

    }

},
renderSortable() {
        this.$().sortable({
            opacity : 0.6,
            axis : 'y'

           });

           this.$().sortable().disableSelection();

   },

   _renderSortable: Ember.on('didInsertElement', function() {

       this.renderSortable();

   }),



});

template:

{{#sortable-ui as |sortable|}}

{{#each sortable.fakeData as |item|}}

    <li>{{item.name}}<button {{action "removeItem" item target=sortable}}>x</button></li>

{{/each}}

{{/sortable-ui}}

If you try and remove an item AFTER a sort is perform, it will either
lock up the ability to remove, or remove items which it's not supposed
to.

This is simplified code in order to describe the root problem.

Posts: 3

Participants: 2

Read full topic