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

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

{{#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}}

然后在模板中：

if

Ember jQuery UI可排序删除项目不同步

1 个答案: