Có cách theo dõi thay đổi tiêu chuẩn nào với trang giới hạn Knockout không?

Question

Tôi có một trang web khá phức tạp với nhiều tab, biểu mẫu, nút radio, trình đơn thả xuống khác nhau. Tất cả đều bị ràng buộc khi sử dụng Knockout.js cho một đối tượng JavaScript rất phức tạp được tải qua cuộc gọi AJAX. Tất nhiên người dùng có thể muck với các công cụ để nội dung trái tim của họ, tại thời điểm đó họ nhấn một nút Lưu để duy trì tất cả các thay đổi của họ trở lại máy chủ.

Tôi đang trong quá trình thiết kế tốt để theo dõi chính xác những gì đã được thay đổi trên trang để tôi có thể thực hiện lưu. Vì vậy, tôi đã đưa ra một vài triển khai có thể.

Tùy chọn 1) Chỉ cần gửi mọi thứ trở lại và để máy chủ phân loại: Với phương pháp này, tôi muốn cho phép Knockout cập nhật nguồn dữ liệu. Nút Lưu sẽ gọi số .toJS() và gửi dữ liệu đó trở lại máy chủ. Ưu điểm: Rất dễ dàng và tốn rất ít công sức cho khách hàng. Nhược điểm: Máy chủ không thực sự biết những gì đã thay đổi và phải tải dữ liệu từ cơ sở dữ liệu để so sánh hoặc chỉ lưu lại tất cả các trường. Các trường này đến từ nhiều bảng và có quan hệ phức tạp. Nó cũng xử lý toàn bộ tài liệu như một đơn vị nguyên tử duy nhất. Nếu ai đó đã thay đổi Trường A và bạn đã thay đổi trường B, một người dùng sẽ mất thay đổi của họ.

Lựa chọn 2) Sử dụng Javascript để so sánh dữ liệu gốc và dữ liệu hiện tại: Sử dụng kỹ thuật này, khi người dùng nhấp vào nút Lưu, tôi có hệ thống sẽ so sánh các dữ liệu gốc và dữ liệu hiện tại và tạo ra một biểu đồ thay đổi. Ưu điểm: Điều này lý tưởng sẽ dẫn đến một biểu đồ nhỏ gọn về chính xác những gì người dùng đã thay đổi và thậm chí có thể không có op nếu không có gì thay đổi. Nhược điểm: Dữ liệu tôi ràng buộc là phức tạp. Nó bao gồm các chuỗi, mảng, đối tượng, mảng các đối tượng, mảng các đối tượng với các đối tượng khác, vv Tìm kiếm các thay đổi sẽ là một vòng lặp lồng nhau khá phức tạp.

Tùy chọn 3) Theo dõi thay đổi khi chúng được thực hiện trong giao diện người dùng: Tôi sẽ phải quan sát các thay đổi khi chúng xảy ra và giữ nguyên delta làm yếu tố giao diện người dùng thay đổi. Nút Lưu chỉ cần gửi biểu đồ thay đổi đó tới máy chủ nếu có bất kỳ thay đổi đang chờ xử lý nào. Ưu điểm: Không cần so sánh hai đối tượng JavaScript lớn tìm kiếm thay đổi, nhưng vẫn có tất cả lợi ích của tùy chọn 2. Nhược điểm: Loại bỏ không xuất hiện để có cách tiêu chuẩn để nghe mọi thay đổi xử lý sự kiện. Tôi tin rằng tôi sẽ phải sử dụng để ràng buộc với tất cả các yếu tố giao diện người dùng hoặc tạo tùy chỉnh bindingHandlers trong Knockout để triển khai theo dõi thay đổi theo thời gian thực này.

Câu hỏi của tôi:

Câu hỏi của tôi là chủ yếu cho các chuyên gia Knockout.js. Có cách tiếp cận chuẩn hay các hướng dẫn được đề nghị để giải quyết kịch bản rõ ràng này? Đang gửi lại tất cả dữ liệu, ngay cả những thứ không thay đổi, một thiết kế chung? Hoặc là những người triển khai trình theo dõi thay đổi tùy chỉnh? Knockout có cung cấp bất kỳ loại khung làm giảm yêu cầu này không?

Cập nhật: Tìm thấy this thing, không chắc chắn nếu nó có thể hữu ích hoặc nếu có ai có phản hồi về nó.

Answer 1

Nếu đó là một câu hỏi bật/tắt nút Save, cho phép người dùng điều hướng "từ" rằng trang/tiểu bang, thì bạn có thể kiểm tra với kiểm tra https://github.com/CodeSeven/kolite

các knockout.dirtyFlag.js

Hy vọng điều này sẽ giúp.

Chỉnh sửa: hãy nhớ rằng bạn nên "không bao giờ" tin tưởng dữ liệu đến từ "Giao diện người dùng". Việc so sánh và xác nhận thực sự, cuối cùng đi vào môi trường "được kiểm soát" của bạn trong máy chủ.

Answer 2

Điều tôi có thể làm là chọn tùy chọn 2 - so sánh chính nó có thể đơn giản như việc xâu chuỗi đối tượng JS và so sánh nó với phiên bản được lưu trong bộ nhớ cache của chính nó.

Một vài tùy chọn khác được thảo luận here.

P.S. Có lẽ ko.mapping có thể giúp bạn quản lý con quái vật này của một đối tượng JS?

Answer 3

tôi đã viết một phần mở rộng thay đổi theo dõi cho loại trực tiếp mà Pete Smith mở rộng đáng kể trên ...

Hãy xem ở đây: https://roysvork.wordpress.com/2014/01/12/tracking-changes-to-complex-viewmodels-with-knockout-js/

Nó hoạt động trên nguyên tắc của việc mở rộng quan sát để theo dõi trạng thái ban đầu vs thay đổi người dùng đã thực hiện trên máy khách. Tôi nghĩ rằng công trình này thực sự tuyệt vời và có thể cung cấp cho người dùng phản hồi thời gian thực để biết những gì họ đã sửa đổi. Trong thực tế, chúng tôi thực sự triển khai bảng lưu cho thấy tất cả các thay đổi đang chờ xử lý và thậm chí cho phép chúng hoàn tác các thay đổi riêng lẻ, tất cả bằng cách sử dụng khả năng tái sử dụng của trình theo dõi thay đổi.

ko.extenders.trackChange = function (target, track) { 
    if (track) { 
     target.isDirty = ko.observable(false); 
     target.originalValue = target(); 
     target.subscribe(function (newValue) { 
      // use != not !== so numbers will equate naturally 
      target.isDirty(newValue != target.originalValue); 
     }); 
    } 
    return target; 
};