javascript - 在 jQuery UI Sortable 之后更新 CollectionView 内容的最佳方式？

Question

感谢@ghemton 的 safeClone 方法，我已经能够让 jQuery UI Sortable 在 Ember.js 中工作:Ember.js + jQuery UI Draggable Clone

排序完成后，我无法让 Ember 知道更改。现在，我正在按照 Move an array element from one array position to another 中的建议使用 splice将集合中的项目移动到适当的位置。这工作正常，但我遇到了窗口滚动问题。

在这个 jsfiddle 中，http://jsfiddle.net/chrisconley/g4aE6/ ，如果您滚动到底部，然后重新排列任何元素，窗口将跳回顶部。如果在 propertyWillChange 和 propertyDidChange 之间放置一个断点，您会看到 Ember 正在暂时从 View 中删除所有项目，这导致窗口跳回到顶部。

App.MySortableView = Em.CollectionView.extend({
  moveItem: function(fromIndex, toIndex){
    var items = this.get('content');
    this.propertyWillChange('content');
    item = items.splice(fromIndex, 1)[0];
    items.splice(toIndex, 0, item);
    this.propertyDidChange('content');
  }
});

有没有办法在不删除和替换整个集合的情况下通知 Ember 更改？

更新的解决方案:

(感谢 Christopher Swasey 在下方的回答)

App.MySortableView = Em.CollectionView.extend({
  moveItem: function(fromIndex, toIndex){
    var items = this.get('content');
    item = items.objectAt(fromIndex);
    items.removeAt(fromIndex);
    items.insertAt(toIndex, item);
  }
});

完整示例在这里:http://jsfiddle.net/chrisconley/NN35P/

Answer 1

你不应该在 Array 这样的对象上使用 JS 标准库调用。这些调用不能被 Ember 的绑定(bind)/观察者捕获。相反，使用 Ember 定义的 API，例如“replace”、“objectAt”等，与数组交互。

在这种情况下，您需要将#splice 替换为#replace。