Verwenden von Knockout.js zum Binden der Bootstrap-Datumsbereichsauswahl und Analysieren des Bereichsinhalts

Question

Ich bin neu im Knockout und versuche zu bekommen, was eine einfache Aufgabe sein sollte. Ich arbeite an einer MVC4 .NET App mit der Absicht, einen Datumsbereich-Picker zu binden, um Ajax-Anforderungen für die Aktualisierung von Highchart-Diagrammdaten zu stellen. Ich benutze Dan Grossmans Bootstrap-Themen-Datumsauswahl und es war bisher großartig (https://github.com/dangrossman/bootstrap-daterangepicker).

Das grundlegende Ziel ist es, die Zeitspanne zu beobachten, die dieser jQuery Date Ranger-Picker aktualisiert, und dann knockout zu verwenden, um diesen Wert an einen anderen Teil der App für die Ajax-Anfrage zu übergeben.

Ich habe alles versucht, was ich online finden kann. ValueUpdate: Ändern Sie auf die Spannweite zu einigen jQuery in Knockout, um das gleiche Ziel zu erreichen, eine Subskriptionsfunktion zu verwenden, um den Wert der Spanne vor und nach dem zu beobachten Datumsauswahl wird verwendet. Anscheinend verwendet dies den Event-Handler jQuery .change(), der nur für Eingaben, Selects und Textareas .. not spans gut ist.

Hier ist die Geige von dem, was ich bisher: http://jsfiddle.net/eyygK/9/

jede Hilfe und Eingang zu schätzen wissen.

Answer 1

Sie müssen nur Ihre currDateRange-Eigenschaft in Ihrem Ansichtsmodell aktualisieren, wenn ein neuer Datumsbereich aktualisiert wird. So

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

, wenn Sie Ihren Datumsbereich aktualisieren, wird es melden KO und Knockout aktualisiert alle Orte, an denen es verwendet wird, die span.

Jetzt können Sie die currDateRange abonnieren, und tun Sie Ihre Ajax Anrufe von dort.

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

Auf diese Weise ist es egal, woher das Update kommt, knockout benachrichtigt alle.