使用 Ember 对 jQuery UI 进行排序后删除项目

【问题标题】：Delete item after sorting jQuery UI with Ember使用 Ember 对 jQuery UI 进行排序后删除项目
【发布时间】：2016-09-23 14:45:43
【问题描述】：

我正在使用带有 jQ​​uery UI 可排序的 Ember，它可以正常工作，直到我想在排序后删除某些项目。这个问题已经在stackoverflow 上得到回答，但该解决方案对我不起作用。我正在使用 Ember 2.6。

组件模板

<ui id="department_roles">
    {{#each sortedList as |item|}}
        {{item.id}}
            <li data-id="{{item.id}}"  role_id="{{item.id}}" class="ui-state-default role_droppable">
                <span>
                    {{item.name}}
                </span>

                <button {{action "removeItem" item.id}}>Remove</button>
            </li>
    {{/each}}
</ui>

组件， 排序工作正常，删除操作项后从数组中删除但 DOM 不正确。

    import Ember from 'ember';

export default Ember.Component.extend({
    list: Ember.ArrayProxy.create({content: Ember.A()}),
    init: function () {
        this._super();
        this.get('list').pushObject({
            id: 1,
            index: 1,
            name: 'name1'
        });
        this.get('list').pushObject({
            id: 2,
            index: 2,
            name: 'name2'
        });
        this.get('list').pushObject({
            id: 3,
            index: 3,
            name: 'name3'
        });
        this.get('list').pushObject({
            id: 4,
            index: 4,
            name: 'name4'
        });
        this.get('list').pushObject({
            id: 5,
            index: 6,
            name: 'name5'
        });
    },
    sortProps: ['index:asc'],
    sortedList: Ember.computed.sort('list', 'sortProps'),
    updateSortedOrder(indices) {
        this.beginPropertyChanges();
        let tracks = this.get('list').forEach((item) => {
            var index = indices[Ember.get(item, 'id')];
            if (Ember.get(item, 'index') !== index) {
                Ember.set(item, 'index', index);
            }
        });
        this.endPropertyChanges();
    },
    didRender: function () {
        this._super();
        var self = this;

        Ember.$("#department_roles").sortable({
            update: function () {
                var indices = {};
                Ember.$(this).children().each((index, item) => {
                    indices[Ember.$(item).data('id')] = index + 1;
                });

                self.updateSortedOrder(indices);
            },
        });

        Ember.$('#department_roles').disableSelection();
    },
    actions: {
        removeItem: function (itemId) {

            var self = this,
                deleteItem,
                list = this.get('list');

            this.$("#department_roles").sortable("destroy");

            list.arrayContentWillChange();

            list.forEach(function (item) {

                if (item.id === itemId) {
                    deleteItem = item;
                }
            });

            list.removeObject(deleteItem);

            list.arrayContentDidChange();

            Ember.$("#department_roles").sortable({
                update: function () {
                    var indices2 = {};
                    Ember.$(this).children().each((index, item) => {
                        indices2[Ember.$(item).data('id')] = index + 1;
                    });
                    self.updateSortedOrder(indices2);

                },
            });

            console.log(self.get('sortedList'));
        }
    }
});

【问题讨论】：

• 删除后是否打印console.log(self.get('sortedList'));排序列表？
• @kumkanillam 是的，打印的列表很好，但 DOM 是错误的。
• 只需删除此行list: Ember.ArrayProxy.create({content: Ember.A()}) 并在init() 中包含以下行 - this.set('list',[]);我的意思是你可以用普通数组而不是 ArrayProxy 试试这个。ArrayProxy 有什么具体原因吗？。
• @kumkanillam 我尝试使用普通的 []，使用 Ember.A 并始终得到相同的结果。我删除了这条线，并且行为相同。这是排序后 DOM 的样子link。我在
• 标签之前添加了额外的 {{item.id}} 以查看每个标签的工作方式，并且每个订单与
• 标签不同。删除第 3 项后，第 2 项也会从 DOM 中删除，因为它在 3 之后。