2012-04-24 25 views
5

tôi đã có thể để có được jQuery UI Sortable làm việc trong Ember.js nhờ vào phương pháp safeClone @ ghemton của: Ember.js + jQuery UI Draggable CloneCách tốt nhất để cập nhật nội dung CollectionView sau khi jQuery UI có thể sắp xếp?

Tôi đang gặp rắc rối để cho Ember biết về sự thay đổi dù một lần các loại đã hoàn thành. Ngay bây giờ, tôi đang sử dụng splice như được đề xuất trong Move an array element from one array position to another để di chuyển mục trong bộ sưu tập đến vị trí thích hợp của nó. Điều đó hoạt động tốt nhưng tôi đang gặp vấn đề với việc cuộn cửa sổ.

Trong jsfiddle này, http://jsfiddle.net/chrisconley/g4aE6/, nếu bạn cuộn xuống dưới cùng, sau đó sắp xếp lại bất kỳ phần tử nào, cửa sổ sẽ nhảy trở lại trên cùng. Nếu bạn đặt điểm ngắt ở giữa propertyWillChangepropertyDidChange, bạn có thể thấy rằng Ember đang xóa tất cả các mục khỏi chế độ xem trong giây lát, điều này làm cho cửa sổ quay trở lại đầu trang.

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

Có cách nào để thông báo cho Ember về thay đổi mà không xóa và thay thế toàn bộ bộ sưu tập không?

Cập nhật Giải pháp:

(Nhờ câu trả lời Christopher Swasey của bên dưới)

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 ví dụ ở đây: http://jsfiddle.net/chrisconley/NN35P/

Trả lời

4

Bạn không nên sử dụng JS cuộc gọi thư viện tiêu chuẩn trên các đối tượng như Mảng. Các cuộc gọi này không bị ràng buộc bởi các ràng buộc/quan sát của Ember. Thay vào đó, hãy sử dụng các API được Ember định nghĩa, chẳng hạn như 'thay thế', 'objectAt', v.v. để tương tác với các mảng.

Trong trường hợp này, bạn sẽ muốn hoán đổi #splice với #replace.

+0

Cảm ơn! Điều đó đã làm nó - câu hỏi ban đầu đã được cập nhật với một giải pháp. –

Các vấn đề liên quan