Evento di modifica del datepicker dell'interfaccia utente jQuery non intercettato da KnockoutJS

Sto cercando di usare KnockoutJS con l'interfaccia utente di jQuery. Ho un elemento di input con un datepicker allegato. Attualmente sto correndo knockout.debug.1.2.1.jse sembra che l'evento di cambiamento non sia mai stato catturato da Knockout. L'elemento è simile al seguente:

<input type="text" class="date" data-bind="value: RedemptionExpiration"/>

Ho anche provato a cambiare il valueUpdatetipo di evento, ma senza risultati. Sembra che Chrome causi un focusevento poco prima che cambi il valore, ma IE no.

Esiste un metodo Knockout che "abbina tutti gli attacchi"? Tecnicamente ho solo bisogno di cambiare il valore prima di rispedirlo al server. Quindi ho potuto vivere con quel tipo di soluzione alternativa.

Penso che il problema sia colpa del datepicker, ma non riesco a capire come risolverlo.

Qualche idea?

Penso che per il datepicker dell'interfaccia utente jQuery sia preferibile utilizzare un'associazione personalizzata che leggerà / scriverà con gli oggetti Date utilizzando le API fornite dal datepicker.

L'associazione potrebbe apparire come (dalla mia risposta qui ):

ko.bindingHandlers.datepicker = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {},
            $el = $(element);

        $el.datepicker(options);

        //handle the field changing by registering datepicker's changeDate event
        ko.utils.registerEventHandler(element, "changeDate", function () {
            var observable = valueAccessor();
            observable($el.datepicker("getDate"));
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $el.datepicker("destroy");
        });

    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            $el = $(element);

        //handle date data coming via json from Microsoft
        if (String(value).indexOf('/Date(') == 0) {
            value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
        }

        var current = $el.datepicker("getDate");

        if (value - current !== 0) {
            $el.datepicker("setDate", value);
        }
    }
};

Lo useresti come:

<input data-bind="datepicker: myDate, datepickerOptions: { minDate: new Date() }" />

Esempio in jsFiddle qui: http://jsfiddle.net/rniemeyer/NAgNV/

Ecco una versione della risposta di RP Niemeyer che funzionerà con gli script di convalida knockout trovati qui: http://github.com/ericmbarnard/Knockout-Validation

ko.bindingHandlers.datepicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {};
        $(element).datepicker(options);

        //handle the field changing
        ko.utils.registerEventHandler(element, "change", function () {
            var observable = valueAccessor();
            observable($(element).val());
            if (observable.isValid()) {
                observable($(element).datepicker("getDate"));

                $(element).blur();
            }
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).datepicker("destroy");
        });

        ko.bindingHandlers.validationCore.init(element, valueAccessor, allBindingsAccessor);

    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());

        //handle date data coming via json from Microsoft
        if (String(value).indexOf('/Date(') == 0) {
            value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
        }

        current = $(element).datepicker("getDate");

        if (value - current !== 0) {
            $(element).datepicker("setDate", value);
        }
    }
};

Le modifiche apportano al gestore eventi change per passare prima il valore immesso e non la data agli script di convalida, quindi impostando la data sull'osservabile solo se è valida. Ho anche aggiunto validationCore.init necessario per i collegamenti personalizzati discussi qui:

http://github.com/ericmbarnard/Knockout-Validation/issues/69

Ho anche aggiunto il suggerimento di rpenrose per una sfocatura sul cambiamento per eliminare alcuni fastidiosi scenari di datepicker che si frappongono alle cose.

Ho usato un approccio diverso. Poiché knockout.js non sembra generare l'evento al momento del cambiamento, ho costretto il datepicker a chiamare change () per il suo input una volta chiuso.

$(".date").datepicker({
    onClose: function() {
        $(this).change(); // Forces re-validation
    }
});

Sebbene tutte queste risposte mi abbiano risparmiato molto lavoro, nessuna di esse ha funzionato completamente per me. Dopo aver selezionato una data, il valore associato non verrà aggiornato. Ho potuto farlo aggiornare solo cambiando il valore della data usando la tastiera e facendo clic fuori dalla casella di input. Ho risolto questo problema aumentando il codice di RP Niemeyer con il codice di Syb per ottenere:

ko.bindingHandlers.datepicker = {
        init: function (element, valueAccessor, allBindingsAccessor) {
            //initialize datepicker with some optional options
            var options = allBindingsAccessor().datepickerOptions || {};

            var funcOnSelectdate = function () {
                var observable = valueAccessor();
                observable($(element).datepicker("getDate"));
            }

            options.onSelect = funcOnSelectdate;

            $(element).datepicker(options);

            //handle the field changing
            ko.utils.registerEventHandler(element, "change", funcOnSelectdate);

            //handle disposal (if KO removes by the template binding)
            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $(element).datepicker("destroy");
            });

        },
        update: function (element, valueAccessor) {

            var value = ko.utils.unwrapObservable(valueAccessor());
            if (typeof(value) === "string") { // JSON string from server
                value = value.split("T")[0]; // Removes time
            }

            var current = $(element).datepicker("getDate");

            if (value - current !== 0) {
                var parsedDate = $.datepicker.parseDate('yy-mm-dd', value);
                $(element).datepicker("setDate", parsedDate);
            }
        }
    };

Sospetto di mettere l'osservabile ($ (element) .datepicker ("getDate")); dichiarazione nella propria funzione e registrandola con options.onSelect ha fatto il trucco?

Grazie per questo articolo l'ho trovato molto utile.

Se vuoi che DatePicker si comporti esattamente come il comportamento predefinito dell'interfaccia utente di JQuery, ti consiglio di aggiungere una sfocatura sull'elemento nel gestore di eventi change:

vale a dire

    //handle the field changing
    ko.utils.registerEventHandler(element, "change", function () {
        var observable = valueAccessor();
        observable($(element).datepicker("getDate"));

        $(element).blur();

    });

Ho risolto questo problema modificando l'ordine dei miei file di script inclusi:

<script src="@Url.Content("~/Scripts/jquery-ui-1.10.2.custom.js")"></script>
<script src="@Url.Content("~/Scripts/knockout-2.2.1.js")"></script>

Lo stesso di RP Niemeyer, ma un supporto migliore di WCF DateTime, Timezones e Uso della proprietà DatePicker onSelect JQuery.

        ko.bindingHandlers.datepicker = {
        init: function (element, valueAccessor, allBindingsAccessor) {
            //initialize datepicker with some optional options
            var options = allBindingsAccessor().datepickerOptions || {};

            var funcOnSelectdate = function () {
                var observable = valueAccessor();
                var d = $(element).datepicker("getDate");
                var timeInTicks = d.getTime() + (-1 * (d.getTimezoneOffset() * 60 * 1000));

                observable("/Date(" + timeInTicks + ")/");
            }
            options.onSelect = funcOnSelectdate;

            $(element).datepicker(options);

            //handle the field changing
            ko.utils.registerEventHandler(element, "change", funcOnSelectdate);

            //handle disposal (if KO removes by the template binding)
            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $(element).datepicker("destroy");
            });

        },
        update: function (element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor());

            //handle date data coming via json from Microsoft
            if (String(value).indexOf('/Date(') == 0) {
                value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
            }

            current = $(element).datepicker("getDate");

            if (value - current !== 0) {
                $(element).datepicker("setDate", value);
            }
        }
    };

Godere :)

http://jsfiddle.net/yechezkelbr/nUdYH/

Penso che possa essere fatto molto più facilmente: <input data-bind="value: myDate, datepicker: myDate, datepickerOptions: {}" />

Quindi non è necessaria la gestione manuale delle modifiche nella funzione init.

Ma in questo caso, la variabile 'myDate' otterrà solo un valore visibile, non un oggetto Date.

In alternativa, è possibile specificare questo in associazione:

Aggiornare:

 function (element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor()),
        current = $(element).datepicker("getDate");

    if (typeof value === "string") {            
       var dateValue = new Date(value);
       if (dateValue - current !== 0)
           $(element).datepicker("setDate", dateValue);
    }               
}

Basato sulla soluzione di Ryan, myDate restituisce la stringa di date standard, che non è quella ideale nel mio caso. Ho usato date.js per analizzare il valore in modo che restituisca sempre il formato data desiderato. Dai un'occhiata a questo esempio violino Esempio .

update: function(element, valueAccessor) {
    var value = ko.utils.unwrapObservable(valueAccessor()),
        current = $(element).datepicker("getDate");
    var d = Date.parse(value);
    if (value - current !== 0) {
        $(element).datepicker("setDate", d.toString("MM/dd/yyyy"));   
    }
}

Avevo bisogno di aggiornare ripetutamente i miei dati dal server, ma non ho ancora finito il lavoro per le mie esigenze condividendo di seguito (il mio formato data / Data (1224043200000) /):

//Object Model
function Document(data) {
        if (String(data.RedemptionExpiration).indexOf('/Date(') == 0) {
            var newDate = new Date(parseInt(data.BDate.replace(/\/Date\((.*?)\)\//gi, "$1")));
            data.RedemptionExpiration = (newDate.getMonth()+1) +
                "/" + newDate.getDate() +
                "/" + newDate.getFullYear();
        }
        this.RedemptionExpiration = ko.observable(data.RedemptionExpiration);
}
//View Model
function DocumentViewModel(){
    ///additional code removed
    self.afterRenderLogic = function (elements) {
        $("#documentsContainer .datepicker").each(function () {
            $(this).datepicker();                   
        });
    };
}

Dopo che il modello è stato formattato correttamente per l'output ho aggiunto un modello con la documentazione knockoutjs :

<div id="documentsContainer">
    <div data-bind="template: { name: 'document-template', foreach: documents, afterRender: afterRenderLogic }, visible: documents().length > 0"></div>
</div>

//Inline template
<script type="text/html" id="document-template">
  <input data-bind="value: RedemptionExpiration" class="datepicker" />
</script>

Poche persone hanno chiesto opzioni di datepicker dinamiche. Nel mio caso avevo bisogno di un intervallo di date dinamico, quindi il primo input definisce il valore minimo del secondo e il secondo imposta il valore massimo per il primo. L'ho risolto estendendo l'handler di RP Niemeyer. Quindi al suo originale:

ko.bindingHandlers.datepicker = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        //initialize datepicker with some optional options
        var options = allBindingsAccessor().datepickerOptions || {},
            $el = $(element);

        $el.datepicker(options);

        //handle the field changing by registering datepicker's changeDate event
        ko.utils.registerEventHandler(element, "change", function() {
            var observable = valueAccessor();
            observable($el.datepicker("getDate"));
        });

        //handle disposal (if KO removes by the template binding)
        ko.utils.domNodeDisposal.addDisposeCallback(element, function() {
            $el.datepicker("destroy");
        });

    },
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            $el = $(element);

        //handle date data coming via json from Microsoft
        if (String(value).indexOf('/Date(') == 0) {
            value = new Date(parseInt(value.replace(/\/Date\((.*?)\)\//gi, "$1")));
        }

        var current = $el.datepicker("getDate");

        if (value - current !== 0) {
            $el.datepicker("setDate", value);
        }
    }
};

Ho aggiunto altri due gestori corrispondenti alle opzioni che volevo modificare:

ko.bindingHandlers.minDate = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            current = $(element).datepicker("option", "minDate", value);
    }
};

ko.bindingHandlers.maxDate = {
    update: function(element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()),
            current = $(element).datepicker("option", "maxDate", value);
    }
};

E li ho usati così nel mio modello:

<input data-bind="datepicker: selectedLowerValue, datepickerOptions: { minDate: minValue()}, maxDate: selectedUpperValue" />       
<input data-bind="datepicker: selectedUpperValue, datepickerOptions: { maxDate: maxValue()}, minDate: selectedLowerValue" />

L'uso di associazioni personalizzate fornite nelle risposte precedenti non è sempre possibile. chiamata$(element).datepicker(...) richiede un tempo considerevole e, ad esempio, se hai alcune dozzine o addirittura centinaia di elementi per chiamare questo metodo, devi farlo "pigro", cioè su richiesta.

Ad esempio, il modello di vista può essere inizializzato, il input i messaggi vengono inseriti nel DOM, ma i corrispondenti datepicker verranno inizializzati solo quando un utente fa clic su di essi.

Quindi, ecco la mia soluzione:

Aggiungi un'associazione personalizzata che consente di collegare dati arbitrari a un nodo:

KO.bindingHandlers.boundData = {
  init: function(element, __, allBindings) {
    element.boundData = allBindings.get('boundData');
  }
};

Usa la rilegatura per attcah l'osservabile usato per il inputvalore di:

<input type='text' class='my-date-input'
       data-bind='textInput: myObservable, boundData: myObservable' />

E infine, quando si inizializza il datepicker, utilizzare l' onSelectopzione è:

$('.my-date-input').datepicker({
  onSelect: function(dateText) {
    this.myObservable(dateText);
  }
  //Other options
});

In questo modo, ogni volta che un utente cambia la data con il datepicker, viene aggiornato anche il corrispondente Knockout osservabile.