Question

由于@ ghemton的safeClone方法，我已经能够在Ember.js中使用jQuery UI Sortable：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/

Answer 1

你不应该在像Array这样的对象上使用JS标准库调用。这些调用不是Ember的绑定/观察者可以捕获的。相反，请使用Ember定义的API，例如＆＃39;替换＆＃39; objectAt＆＃39;等来与数组进行交互。

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

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

1 个答案: