Utilizzo di Knockout.js per associare il selettore daterange bootstrap e analizzare il contenuto dell'estensione

Question

Sono nuovo ad eliminazione diretta e sto cercando di ottenere quello che dovrebbe essere un compito semplice attivo e funzionante. Sto lavorando a un'app MVC4 .NET con l'intenzione di associare un selettore di intervalli di date per effettuare richieste ajax per l'aggiornamento dei dati del grafico di Highchart. Sto usando il raccoglitore di date a tema bootstrap di Dan Grossman ed è stato fantastico finora (https://github.com/dangrossman/bootstrap-daterangepicker).

L'obiettivo di base è quello di controllare l'intervallo in cui questo raccoglitore di date ranger jQuery si aggiorna, quindi utilizzare knockout per passare questo valore a un'altra parte dell'app per la richiesta di ajax.

Ho provato tutto quello che riesco a trovare in linea. ValueUpdate: modifica dello span all'utilizzo di jQuery all'interno di un knockout per ottenere lo stesso obiettivo, utilizzando una funzione di sottoscrizione per visualizzare il valore dello span prima e dopo il viene utilizzato il selettore di date. Apparentemente questo usa il gestore di eventi jQuery .change(), che è valido solo per input, select e textareas .. non per span.

Ecco il violino di quello che ho finora: http://jsfiddle.net/eyygK/9/

Apprezzo tutto l'aiuto e l'ingresso.

Answer 1

È sufficiente aggiornare la proprietà currDateRange nel modello di visualizzazione, quando viene aggiornato un nuovo intervallo di date.

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

Quindi, quando si aggiorna l'intervallo di date, segnalerà a knockout, e knockout aggiornerà tutti i luoghi dove è utilizzato, il span.

Ora è possibile abbonarsi allo currDateRange e fare le chiamate Ajax da lì.

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

In questo modo non importa dove l'aggiornamento viene, ad eliminazione diretta notificherà a tutti.