Knockout - Sử dụng foreach và sắp xếp cùng nhau

Question

Tôi gặp sự cố khi kết hợp liên kết foreach với một sắp xếp. Tôi có một danh sách ràng buộc như vậy:

<article data-bind="foreach: widgets"> 

Widgets là một mảng obvservable đơn giản:

var widgets= ko.observableArray(); 

này làm việc độc đáo đem lại cho tôi một danh sách các "widget" của tôi. Nếu tôi thêm một "widget" mới vào danh sách này thì nó sẽ tự động xuất hiện trong danh sách thông qua liên kết dữ liệu.

Tuy nhiên càng sớm càng tôi thêm sắp xếp để các mảng:

<article data-bind="foreach: widgets.sort(function (left, right) { return left.order() == right.order() ? 0 : (left.order() < right.order() ? -1 : 1); })"> 

Sau đó mới được thêm vào các widget không còn xuất hiện trong danh sách của tôi - trừ khi tôi tải lại trang. (Việc sắp xếp hoạt động độc đáo vào thời điểm này - nếu tôi cập nhật trường "thứ tự" mà tôi sắp xếp thì các mục trong danh sách của tôi được sắp xếp lại động).

Làm thế nào tôi có thể tiếp tục phân loại để chơi độc đáo với cập nhật động của các mục mới trong mảng quan sát được của tôi?

Tôi đang sử dụng Breezejs để truy xuất dữ liệu của mình, tuy nhiên tôi không nghĩ điều đó ảnh hưởng đến kịch bản này.

Answer 1

observableArray.sort trả về mảng được sắp xếp ("thường xuyên") được sắp xếp và không phải là observableArray đó là lý do tại sao các thay đổi không được hiển thị trên giao diện người dùng.

Để sắp xếp và cập nhật giao diện người dùng, bạn cần tạo một ko.computed để phân loại và sử dụng tính toán trong ràng buộc của bạn. Bởi vì ko.computed sẽ lắng nghe các thay đổi widgets và tính lại phân loại.

var widgets= ko.observableArray(); 

var sortedWidgets = ko.computed(function() { 
    return widgets().sort(function (left, right) { 
     return left.order() == right.order() ? 
      0 : 
      (left.order() < right.order() ? -1 : 1); 
    }); 
}); 

Sau đó, bạn có thể gắn nó với:

<article data-bind="foreach: sortedWidgets" />