Événement de changement de datepicker de l'interface utilisateur jQuery non intercepté par KnockoutJS

J'essaye d'utiliser KnockoutJS avec l'interface utilisateur jQuery. J'ai un élément d'entrée avec un datepicker attaché. Je suis actuellement en cours d'exécution knockout.debug.1.2.1.jset il semble que l'événement de changement ne soit jamais capturé par Knockout. L'élément ressemble à ceci:

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

J'ai même essayé de changer le valueUpdatetype d'événement mais en vain. Il semble que Chrome provoque un focusévénement juste avant de modifier la valeur, mais pas IE.

Existe-t-il une méthode Knockout qui "relie toutes les liaisons"? Je n'ai techniquement besoin que de changer la valeur avant de la renvoyer au serveur. Je pourrais donc vivre avec ce genre de solution de contournement.

Je pense que le problème est la faute du datepicker, mais je ne peux pas comprendre comment résoudre ce problème.

Des idées?

Je pense que pour le datepicker de l'interface utilisateur jQuery, il est préférable d'utiliser une liaison personnalisée qui lira / écrit avec les objets Date en utilisant les API fournies par le datepicker.

La liaison pourrait ressembler à (d'après ma réponse ici ):

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);
        }
    }
};

Vous l'utiliseriez comme:

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

Exemple dans jsFiddle ici: http://jsfiddle.net/rniemeyer/NAgNV/

Voici une version de la réponse de RP Niemeyer qui fonctionnera avec les scripts de validation knockout trouvés ici: 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);
        }
    }
};

Les modifications sont apportées au gestionnaire d'événement de modification pour transmettre d'abord la valeur saisie et non la date aux scripts de validation, puis définir la date sur l'observable uniquement si elle est valide. J'ai également ajouté le validationCore.init qui est nécessaire pour les liaisons personnalisées décrites ici:

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

J'ai également ajouté la suggestion de rpenrose pour un flou sur le changement afin d'éliminer certains scénarios de datepicker embêtants qui gênaient les choses.

J'ai utilisé une approche différente. Puisque knockout.js ne semble pas déclencher l'événement en cas de modification, j'ai forcé le sélecteur de date à appeler change () pour son entrée une fois fermé.

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

Bien que toutes ces réponses m'aient épargné beaucoup de travail, aucune n'a fonctionné pleinement pour moi. Après avoir sélectionné une date, la valeur liée ne serait pas mise à jour. Je ne pouvais le mettre à jour que lors de la modification de la valeur de la date à l'aide du clavier, puis en cliquant hors de la zone de saisie. J'ai corrigé cela en augmentant le code de RP Niemeyer avec le code de syb pour obtenir:

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);
            }
        }
    };

Je soupçonne de mettre l'observable ($ (element) .datepicker ("getDate")); instruction dans sa propre fonction et l'enregistrer avec options.onSelect a fait l'affaire?

Merci pour cet article, je l'ai trouvé très utile.

Si vous voulez que le DatePicker se comporte exactement comme le comportement par défaut de JQuery UI, je vous recommande d'ajouter un flou sur l'élément dans le gestionnaire d'événements de modification:

c'est à dire

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

        $(element).blur();

    });

J'ai résolu ce problème en modifiant l'ordre de mes fichiers de script inclus:

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

Identique à RP Niemeyer, mais meilleure prise en charge de WCF DateTime, Timezones et Utilisation de la propriété 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);
            }
        }
    };

Prendre plaisir :)

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

Je pense que cela peut être fait beaucoup plus facilement: <input data-bind="value: myDate, datepicker: myDate, datepickerOptions: {}" />

Vous n'avez donc pas besoin de gestion manuelle des modifications dans la fonction init.

Mais dans ce cas, votre variable 'myDate' obtiendra uniquement une valeur visible, pas un objet Date.

Vous pouvez également le spécifier dans la liaison:

Mettre à jour:

 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);
    }               
}

Sur la base de la solution de Ryan, myDate renvoie la chaîne de date standard, ce qui n'est pas l'idéal dans mon cas. J'ai utilisé date.js pour analyser la valeur afin qu'elle renvoie toujours le format de date souhaité. Jetez un œil à cet exemple de violon Exemple .

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"));   
    }
}

J'avais besoin de mettre à jour à plusieurs reprises mes données à partir du serveur, mais je n'ai pas tout à fait terminé le travail pour le partage de mes besoins ci-dessous (mon format de date / date (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();                   
        });
    };
}

Une fois le modèle correctement formaté pour la sortie, j'ai ajouté un modèle avec la documentation 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>

Peu de gens ont demandé des options de sélecteur de date dynamiques. Dans mon cas, j'avais besoin d'une plage de dates dynamique - donc la première entrée définit la valeur minimale de la seconde et la seconde définit la valeur maximale pour la première. Je l'ai résolu en étendant le gestionnaire RP Niemeyer. Donc à son original:

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);
        }
    }
};

J'ai ajouté deux autres gestionnaires correspondant aux options que je voulais modifier:

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);
    }
};

Et les ai utilisés comme ça dans mon modèle:

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

L'utilisation de liaisons personnalisées fournies dans les réponses précédentes n'est pas toujours possible. Appel$(element).datepicker(...) prend un temps considérable, et si vous avez, par exemple, quelques dizaines, voire des centaines d'éléments pour appeler cette méthode, vous devez le faire "paresseux", c'est-à-dire à la demande.

Par exemple, le modèle de vue peut être initialisé, le input s étant insérés dans le DOM, mais les sélecteurs de date correspondants ne seront initialisés que lorsqu'un utilisateur clique dessus.

Alors, voici ma solution:

Ajoutez une liaison personnalisée qui permet d'attacher des données arbitraires à un nœud:

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

Utilisez la liaison pour attcah l'observable utilisée pour la inputvaleur de:

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

Et enfin, lors de l'initialisation du datepicker, utilisez son onSelectoption:

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

De cette façon, chaque fois qu'un utilisateur change la date avec le sélecteur de date, l'observable Knockout correspondant est également mis à jour.