jquery - 使用 Knockout.js 绑定(bind) Bootstrap 日期范围选择器并解析跨度内容

Question

我是 knockout 新手，正在尝试启动并运行一项简单的任务。我正在开发一个 MVC4 .NET 应用程序，目的是绑定(bind)日期范围选择器以发出更新 Highchart 图形数据的 ajax 请求。我正在使用 Dan Grossman 的 Bootstrap 主题日期选择器，到目前为止效果非常好 ( https://github.com/dangrossman/bootstrap-daterangepicker )。

基本目标是观察此 jQuery 日期范围选择器更新的范围，然后使用 knockout 将此值传递到应用程序的另一部分以进行 ajax 请求。

我已经尝试了我可以在网上找到的所有内容.. valueUpdate: 在范围上更改为在 knockout 中使用一些 jQuery 来完成相同的目标，使用订阅函数来观察日期前后的范围值使用选择器。显然，这使用了 jQuery .change() 事件处理程序，该处理程序仅适用于输入、选择和文本区域……不适用于跨度。

这是我迄今为止所掌握的 fiddle :http://jsfiddle.net/eyygK/9/

感谢任何帮助和意见。

Answer 1

当更新新的日期范围时，您只需更新 View 模型中的 currDateRange 属性即可。

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

因此，当您更新日期范围时，它会将其报告给knockout，而knockout将更新所有使用它的位置，即span。

现在您可以订阅 currDateRange，并从那里执行 Ajax 调用。

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

这样，无论更新来自哪里，knout 都会通知所有人。