javascript – jQuery UI可排序后更新CollectionView内容的最佳方法？

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

一旦排序完成,我很难让Ember知道这个变化.现在,我正在按照Move an array element from one array position to another的建议使用拼接将集合中的项目移动到适当的位置.这工作正常,但我有窗口滚动的问题.

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

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,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/

最佳答案

您不应该对像Array这样的对象使用JS标准库调用. Ember的绑定/观察者无法捕获这些调用.相反,使用Ember定义的API,例如’replace’,’objectAt’等与数组交互.

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