Sử dụng Knockout.js để liên kết bộ chọn khởi động daterange và nội dung phân tích cú pháp

Question

Tôi mới loại trực tiếp và cố gắng để có được một nhiệm vụ đơn giản và chạy. Tôi đang làm việc trên một ứng dụng .NET MVC4 với ý định ràng buộc bộ chọn phạm vi ngày để thực hiện yêu cầu ajax để cập nhật dữ liệu biểu đồ Highchart. Tôi đang sử dụng công cụ chọn ngày theo chủ đề khởi động của Dan Grossman và nó rất tuyệt vời (https://github.com/dangrossman/bootstrap-daterangepicker).

Mục tiêu cơ bản là xem khoảng thời gian mà bản cập nhật bộ chọn kiểm duyệt ngày jQuery này, và sau đó sử dụng loại trực tiếp để chuyển giá trị này đến một phần khác của ứng dụng cho yêu cầu ajax.

Tôi đã thử tất cả mọi thứ tôi có thể tìm thấy trực tuyến .. valueUpdate: thay đổi trên span để sử dụng một số jQuery trong knockout để đạt được mục tiêu tương tự, sử dụng chức năng đăng ký để xem giá trị của khoảng trước và sau bộ chọn ngày được sử dụng. Rõ ràng điều này sử dụng trình xử lý sự kiện jQuery .change(), điều này chỉ tốt cho các đầu vào, các lựa chọn và văn bản .. không kéo dài.

Đây là fiddle về những gì tôi có cho đến nay: http://jsfiddle.net/eyygK/9/

Đánh giá cao bất kỳ sự giúp đỡ và đầu vào.

Answer 1

Bạn chỉ cần cập nhật thuộc tính currDateRange trong mô hình chế độ xem của mình, khi phạm vi ngày mới được cập nhật.

$('#reportrange').daterangepicker({ 
    ..., 
    function (start, end) { 
     var dateRangeText = start.toString('MM/d/yy') + ' - ' + end.toString('MM/d/yy'); 
     vm.currDateRange(dateRangeText); 
    } 
}); 

Vì vậy, khi bạn cập nhật phạm vi ngày của bạn, nó sẽ báo cho knockout, và loại trực tiếp sẽ cập nhật tất cả những nơi nó được sử dụng, các span.

Bây giờ bạn có thể đăng ký currDateRange và thực hiện cuộc gọi Ajax từ đó.

self.currDateRange = ko.observable("09/24/12 - 09/24/12"); 
self.currDateRange.subscribe(function(newValue) { 
    $.ajax({...}); 
}); 

Bằng cách đó, việc cập nhật đến từ đâu, loại trực tiếp sẽ thông báo cho mọi người.