エンバー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}}