使用Knockout.js绑定bootstrap daterange选择器并解析span内容

Question

我是淘汰赛的新手,并试图让这项任务成为一项简单的任务.我正在开发一个MVC4 .NET应用程序,目的是绑定一个日期范围选择器来发出更新Highchart图数据的ajax请求.我正在使用Dan Grossman的bootstrap主题日期选择器,到目前为止它一直很棒(https://github.com/dangrossman/bootstrap-daterangepicker).

基本目标是观察此jQuery日期游侠选择器更新的范围,然后使用knockout将此值传递给应用程序的另一部分以获取ajax请求.

我已经尝试了我可以在网上找到的所有内容.. valueUpdate:更改跨度以在knockout中使用一些jQuery来完成相同的目标,使用subscribe函数在使用日期选择器之前和之后观察跨度的值.显然,这使用了jQuery .change()事件处理程序,它只对输入,选择和textareas有好处..而不是跨越.

这是我到目前为止的小提琴: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);
    }
});

因此，当您更新日期范围时，它会将其报告给淘汰赛，淘汰赛将更新所有使用它的地方，span.

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

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

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