在jQuery UI Sortable之后更新CollectionView内容的最佳方式？ [英] Best way to update CollectionView content after jQuery UI Sortable?

问题描述

我已经能够获得jQuery UI Sortable在Ember.js中工作，感谢@ ghemton的 safeClone 方法：Ember.js + jQuery UI可拆分克隆

我有麻烦一旦排序完成，让Ember知道更改。现在，我使用 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？ p>

更新的解决方案：

（感谢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等与数组进行交互。

在这种情况下，用#replace交换#splice。

I've been able to get jQuery UI Sortable working in Ember.js thanks to @ghemton's safeClone method: Ember.js + jQuery UI Draggable Clone

I'm having trouble letting Ember know of the change though once the sort has completed. Right now, I'm using splice as suggested in Move an array element from one array position to another to move the item in the collection to its proper place. That works fine but I'm having an issue with window scrolling.

In this jsfiddle, http://jsfiddle.net/chrisconley/g4aE6/, if you scroll to the bottom, then reorder any of the elements, the window jumps back to the top. If you put a breakpoint in between propertyWillChange and propertyDidChange, you can see that Ember is removing all of the items from the view momentarily, which is causing the window to jump back to the top.

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');
  }
});

Is there a way to notify Ember of the change without it removing and replacing the entire collection?

Updated Solution:

(Thanks to Christopher Swasey's answer below)

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);
  }
});

Full example here: http://jsfiddle.net/chrisconley/NN35P/

解决方案

You shouldn't be using JS standard library calls on objects like Array. These calls aren't trappable by Ember's bindings/observers. Instead, use the APIs defined by Ember, such as 'replace', 'objectAt', etc. to interact with arrays.

In this case, you'll want to swap out #splice with #replace.

这篇关于在jQuery UI Sortable之后更新CollectionView内容的最佳方式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！