Bắt đầu quá trình chuyển đổi trước khi kích hoạt độ phân giải

Question

Có cách nào đơn giản để sử dụng chuyển tiếp của Durandal để làm mờ chế độ xem cũ ngay lập tức và mờ dần trong chế độ mới khi chức năng kích hoạt của nó đã được giải quyết chưa?

Dưới đây là một số bối cảnh:

Tôi có một Durandal 1.2 SPA nơi mà hầu hết các quan điểm kích hoạt chức năng thực hiện cuộc gọi dịch vụ và gửi lại một lời hứa cho phù hợp. Tất cả điều này đều hoạt động tốt, nhưng quá trình chuyển đổi chỉ chạy khi tải hoàn tất đôi khi dịch vụ có thể mất vài giây để phản hồi - dẫn đến trải nghiệm người dùng kém khi bạn nhấp vào liên kết và mất vài giây trước khi bất kỳ điều gì đáng chú ý xảy ra.

Giải pháp là làm sống động chế độ xem cũ ngay lập tức (trước khi kích hoạt giải quyết) và sau đó tạo hiệu ứng ở chế độ xem mới khi kích hoạt được thực hiện. Hiện tại, mọi chế độ xem hoạt ảnh tương ứng với một tuyến đường và tôi không mong đợi điều này sẽ thay đổi. Tôi đã đưa ra và thử nghiệm một số giải pháp mà tất cả công việc nhưng dường như ít hơn lý tưởng (và không tận dụng khuôn khổ chuyển Durandal của):

• Manually động đi mỗi điểm trong Tắt của nó() và animate nó trở lại bằng cách xemAttached()
• Liên kết hiển thị div của máy chủ lưu trữ với bộ định tuyến.điều hướng (sử dụng liên kết tùy chỉnh để xử lý việc chuyển đổi chẳng hạn như ví dụ fadeVisible từ trang web loại trực tiếp)
• Đăng ký theo bộ định tuyến theo cách thủ công.điều hướng và chạy logic tùy chỉnh khi thay đổi

Tôi đã thử tất cả và cho đến nay tôi thích ràng buộc tùy chỉnh trên div .page-host tốt nhất vì nó liên quan đến số lượng mã ít nhất, nhưng nó chỉ hoạt động trong trường hợp của tôi vì hoàn cảnh cụ thể của tôi và không phải là giải pháp chung.

Điều này có vẻ giống như những thứ mà quá trình chuyển đổi của Durandal được tạo ra. Có cách nào thanh lịch hơn để làm điều này trong Durandal bằng cách sử dụng chuyển tiếp (trong phiên bản 1.2 hoặc bản phát hành 2.0 sắp tới) không?

Tôi đã thấy this question dường như hỏi một điều gì đó tương tự, nhưng có vẻ hơi ít cụ thể hơn và không có câu trả lời phù hợp.

Answer 1

Di chuyển logic không đồng bộ của bạn ra khỏi kích hoạt và đặt nó vào chế độ xemAttached. Điều này sẽ cho phép chế độ xem hoạt ảnh ngay lập tức. Sau đó, từ viewAttached, bạn được an toàn để thực thi mã async mà không vi phạm KO vì các ràng buộc đã được áp dụng. (Lưu ý: viewAttached được đổi tên trong 2.0 để attachedToParent.)

Answer 2

Bạn có thể thêm handler cho 'bộ định tuyến: tuyến đường: kích hoạt' sự kiện bằng cách thêm mã sau vào shell.js của bạn:

router.on('router:route:activating').then(function() { 
    //fade out animation goes here; 
    //Usually that is changing of observable which will add/remove css class for your view (or shows loading overlay) 
    //Animation of view transition could be done by add class css3 animation. 
}); 

Và trong trường hợp nếu bạn đang sử dụng "đang tải" có thể quan sát được - trong quá trình chuyển đổi tùy chỉnh, bạn có thể thiết lập điều này trở lại để ẩn lớp phủ tải:

if (context.bindingContext.$data && context.bindingContext.$data.isLoading && ko.isObservable(context.bindingContext.$data.isLoading)) { 
    composition.current.complete(function() { 
    context.bindingContext.$data.isLoading (true); 
    }); 
}