EmberJS 计算排序属性与 jQuery 冲突 UI 可排序

Question

我在使用 EmberJS 获得拖放排序功能时遇到问题。

涵盖此问题的教程对初始排序没有提供任何帮助，我正在通过计算属性。

我遇到的似乎是 ember 在 sortedItems 计算的属性发生变化时重新渲染和 jQueryUI Sortable 更新 DOM 之间的竞争条件。列表项在排序时重复或完全消失。

路线

import Ember from 'ember';

export default Ember.Route.extend({
  model: function() {
    return Ember.Object.create({
      id: 1,
      title: "Title",
      subtitle: "Subtitle",
      items: [
        Ember.Object.create({
          name: "Item 2",
          sortOrder: 2,
          id: 1
        }),
        Ember.Object.create({
          name: "Item 1",
          sortOrder: 1,
          id: 2
        }),
        Ember.Object.create({
          name: "Item 3",
          sortOrder: 3,
          id: 3
        })
      ]
    });
  }
});

控制器

import Ember from 'ember';

export default Ember.ObjectController.extend({

  sortProperties: [ 'sortOrder' ],
  sortedItems: Ember.computed.sort('model.items', 'sortProperties'),

  actions: {
    updateSortOrder: function(indexes) {
      this.get('items').forEach(function(item) {
        var index = indexes[item.get('id')];
        item.set('sortOrder', index);
      });
    }
  }

});

查看

import Ember from 'ember';

export default Ember.View.extend({

  didInsertElement: function() {
    var controller = this.get('controller');

    this.$(".item-list").sortable({
      update: function(event, ui) {
        var indexes = {};

        $(this).find('li').each(function(index) {
          indexes[$(this).data('id')] = index;
        });

        controller.send('updateSortOrder', indexes);
      }
    })
  }
});

模板

<h1>{{ title }}</h1>
<h2>{{ subtitle }}</h2>

<ul class="item-list">
  {{#each item in sortedItems }}
    <li data-id="{{ unbound item.id }}">
      name: {{ item.name }}<br />
      sortOrder: {{ item.sortOrder }}<br />
      id: {{ item.id }}
    </li>
  {{/each}}
</ul>

这是重现该问题的 Barebones Ember 应用程序：https://github.com/silasjmatson/test-sortable

问题

有没有办法避免这种竞争条件或在控制器初始化时只排序一次？

抱歉，如果互联网上已经有这个问题的答案。尽管 searching/experimenting.

一周了，我还是没能解决这个问题

Answer 1

控制器初始化时只能排序一次：

sortedItems: Ember.computed(function() {
    return Ember.get(this, 'model.items').sortBy('sortOrder');
})

因为您使用的是计算排序属性，所以每当 sortOrder 属性在任何项目上发生变化时，它都会尝试为您对列表进行排序，这会重新呈现 #each 并做一些时髦的事情.

只需最初使用上述方法排序一次，然后让 jQuery 处理项目的顺序 - 而不是 jQuery 和 Ember。

EmberJS 计算排序属性与 jQuery 冲突 UI 可排序

EmberJS computed sort property conflicting with jQuery UI Sortable

jquery-ui-sortable

ember.js

路线

控制器

查看

模板

问题

EmberJS 计算排序 属性 与 jQuery 冲突 UI 可排序

EmberJS computed sort property conflicting with jQuery UI Sortable

jquery-ui-sortable

ember.js

路线

控制器

查看

模板

问题

EmberJS 计算排序属性与 jQuery 冲突 UI 可排序