使用 Knockout.js 绑定引导日期范围选择器并解析跨度内容

Question

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

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

我已经尝试了我可以在网上找到的所有内容.. valueUpdate：更改跨度以在淘汰赛中使用一些 jQuery 来完成相同的目标，使用订阅函数在日期之前和之后查看跨度的值选择器被使用。显然，这使用了 jQuery .change() 事件处理程序，它只适用于输入、选择和文本区域......而不是跨度。

这是我目前所拥有的小提琴：http://jsfiddle.net/eyygK/9/

感谢任何帮助和意见。

Answer 1

当新的日期范围更新时，您只需更新视图模型中的 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({...});
});

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