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

【问题标题】：Best way to update CollectionView content after jQuery UI Sortable?在 jQuery UI Sortable 之后更新 CollectionView 内容的最佳方法？
【发布时间】：2012-04-24 12:43:50
【问题描述】：

感谢@ghemton 的safeClone 方法：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 会暂时从视图中删除所有项目，这会导致窗口跳回顶部。

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/

【问题讨论】：

标签： javascript jquery-ui ember.js

【解决方案1】：

您不应该对像 Array 这样的对象使用 JS 标准库调用。这些调用不能被 Ember 的绑定/观察者捕获。而是使用 Ember 定义的 API，例如 'replace'、'objectAt' 等来与数组进行交互。

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

【讨论】：

谢谢！做到了 - 原始问题已更新为解决方案。