Làm cách nào để trao đổi hai mục trong một ObservableArray?

Question

Tôi có một nút di chuyển một mục ở vị trí còn lại trong một ObservableArray. Tôi đang làm theo cách sau. Tuy nhiên, nhược điểm là các loại() [index] bị loại bỏ khỏi mảng, do đó loại bỏ bất kỳ thao tác DOM nào (bằng cách xác thực jQuery trong trường hợp của tôi) trên nút đó.

Có cách nào để hoán đổi hai mục mà không sử dụng biến tạm thời để giữ nguyên nút DOM không?

moveUp: function (category) { 
     var categories = viewModel.categories; 
     var length = categories().length; 
     var index = categories.indexOf(category); 
     var insertIndex = (index + length - 1) % length; 

     categories.splice(index, 1); 
     categories.splice(insertIndex, 0, category); 
     $categories.trigger("create"); 
    } 

Answer 1

Dưới đây là phiên bản của tôi về moveUp mà không được trao đổi trong một bước:

moveUp: function(category) { 
    var i = categories.indexOf(category); 
    if (i >= 1) { 
     var array = categories(); 
     categories.splice(i-1, 2, array[i], array[i-1]); 
    } 
} 

Điều đó vẫn không giải quyết được vấn đề , mặc dù, bởi vì Knockout sẽ vẫn thấy trao đổi là xóa và thêm hành động. Tuy nhiên, có open issue để Knockout hỗ trợ các mục di chuyển. Cập nhật: Kể từ phiên bản 2.2.0, Knockout không nhận ra các mục đã di chuyển và liên kết foreach sẽ không hiển thị lại chúng.

Answer 2

Tôi gặp vấn đề tương tự như khi tôi muốn jQuery kéo các mục của mình vào mục &. Giải pháp của tôi đã trở thành sử dụng các mẫu knockoutjs để ràng buộc beforeRemove và sauThêm sự kiện vào mô hình. Lớp Person/chức năng cũng là một mô hình xem loại trực tiếp đơn giản.

Trong ví dụ dưới đây, tôi sử dụng .draggable(), nhưng bạn có thể dễ dàng sử dụng xác thực. Thêm mã của riêng bạn để thao tác với ObservableArray và bạn nên làm tốt.

HTML:

<div data-bind="template: {foreach:attendeesToShow, beforeRemove:hideAttendee, afterAdd:showAttendee}"> 
    <div class="person"> 
     <img src="person.jpg" alt="" /> 
     <div data-bind="text: firstName" ></div> 
     <div class="deleteimg" data-bind="click:$parent.removeAttendee" title="Remove"></div> 
    </div> 
</div> 

ViewModel:

Answer 3

nhờ Michael Best cho phiên bản của ông moveup

phiên bản của tôi về moveDown

moveDown: function(category) { 
    var array = categories(); 
    var i = categories.indexOf(category); 
    if (i < arr.length) { 
     categories.splice(i, 2, array[i + 1], array[i]); 
    } 
} 

Answer 4

Tôi biết câu trả lời này đến hơi muộn, nhưng tôi nghĩ rằng nó có thể có ích cho những người muốn có một tổng quát hơn trao đổi giải pháp. Bạn có thể thêm một chức năng hoán đổi để observableArrays bạn như vậy:

ko.observableArray.fn.swap = function(index1, index2) { 
    this.valueWillMutate(); 

    var temp = this()[index1]; 
    this()[index1] = this()[index2]; 
    this()[index2] = temp; 

    this.valueHasMutated(); 
} 

Sau đó bạn có thể sử dụng chức năng này để trao đổi hai yếu tố trong một mảng cho chỉ số của họ:

myArray.swap(index1, index2); 

Đối với một hàm moveUp, bạn có thể sau đó làm điều gì đó như sau:

moveUp: function(category) { 
    var i = categories.indexOf(category); 
    if (i > 0) { 
     categories.swap(i, i+1); 
    } 
}