灰烬jQuery UI的排序删除不同步的项目

Question

组件：

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(); 

    }), 



}); 

模板：

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

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

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

     {{/each}} 

    {{/sortable-ui}} 

如果你尝试过了排序是执行删除项目，它要么锁起来的能力删除或删除它不应该的东西。

这是简化的代码，以描述根本问题。

Answer 1

想通了，有点哈克，但解决这一问题的方法之一是：

removed: true, 

    didRender() { 
     this._super(...arguments); 
     this.set('removed', true); 

    }, 



actions: { 
    removeItem(item) { 
     this.set('removed', false); 
     this.get('fakeData').removeObject(item); 
     this.rerender(); 

    } 

}, 

然后在模板：

{{#sortable-ui as |sortable|}} 
    {{#if sortable.removed}} 
    {{#each sortable.fakeData as |item|}} 

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

    {{/each}} 

    {{/if}} 

{{/sortable-ui}}