2012-05-07 27 views
6

Trong viewmodel của tôi, tôi có một ObsoutableArray knockoutj. Ngay sau khi tôi khởi tạo ViewModel, nó liên kết dữ liệu thành công. Sau đó, những gì tôi cần làm là sắp xếp bộ sưu tập.knockoutjs ObservableArrays và chức năng sắp xếp: UI không được cập nhật

$.each(vm.searchResults(), function (i, property) { 
    console.log(property.Name()); 
}); 

vm.searchResults().sort(function (a, b) { 
    return a.Name().toLowerCase() > b.Name().toLowerCase() ? 1 : -1; 
}); 

$.each(vm.searchResults(), function (i, property) { 
    console.log(property.Name()); 
}); 

Như bạn có thể thấy, tôi xuất Tên của phần tử vào bảng điều khiển để xem thứ tự trước và sau khi sắp xếp. Việc phân loại hoạt động tốt. Vấn đề là với bản cập nhật giao diện người dùng. Bằng cách nào đó, giao diện người dùng không được cập nhật.

Sau đó, hãy cố gắng loại bỏ một bản ghi từ các mảng với đoạn mã sau để xem nếu giao diện người dùng sẽ trả lời đó hay không:

vm.searchResults().shift(); 

Giao diện vẫn như giống nhau và không cập nhật một lần nữa. Điều gì sẽ là vấn đề ở đây?

Edit:

Dưới đây là một trường hợp mẫu cũng như: http://jsfiddle.net/tugberk/KLpwP/

Vấn đề tương tự ở đây là tốt.

Edit:

tôi giải quyết vấn đề như thể hiện trong mẫu này: http://jsfiddle.net/tugberk/KLpwP/16/ Nhưng tôi vẫn không chắc chắn lý do tại sao nó làm việc như tôi đã cố gắng lúc đầu.

Trả lời

18

Bạn đang bỏ qua các mảng quan sát được khi sắp xếp. Điều này gây ra vấn đề, bởi vì KO không thể theo dõi mảng được thay đổi. ko.observableArray() có chức năng sort có cùng chữ ký và sẽ thông báo cho người đăng ký quan sát thấy rằng nó đã bị thay đổi. Giải pháp rất đơn giản: loại bỏ niềng răng vm.searchResults().sort =>vm.searchResults.sort. Hãy kiểm tra ví dụ của tôi: http://jsfiddle.net/RbX86/

Một cách khác để cho KO biết mảng đó có thay đổi - gọi phương thức valueHasMutated sau khi thao tác với mảng. Vui lòng xem lại mẫu này: http://jsfiddle.net/RbX86/1/ Cách tiếp cận này rất tốt khi bạn cần thực hiện nhiều thay đổi trong mảng của mình và bạn chỉ muốn làm mới giao diện người dùng một lần.

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