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

Question

感谢@ ghemton的safeClone方法,我已经能够在Ember.js中运行jQuery UI Sortable :Ember.js + jQuery UI Draggable Clone

一旦排序完成,我很难让Ember知道这个变化.现在,我splice按照将数组元素从一个数组位置移动到另一个数组位置的建议使用,将集合中的项目移动到适当的位置.这工作正常,但我有窗口滚动的问题.

在这个jsfiddle,http://jsfiddle.net/chrisconley/g4aE6/,如果你滚动到底部,然后重新排序任何元素,窗口跳回到顶部.如果你把一个断点之间propertyWillChange和propertyDidChange,你可以看到,灰烬从视图瞬间,这是造成窗口跳回到顶端删除所有项目.

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 的绑定/观察者捕获。相反，使用 Ember 定义的 API，例如“replace”、“objectAt”等来与数组交互。

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