Knockout.js input box event change – passe une ancienne valeur

Lors de l'ajout d'une liaison d'événement de modification à une boîte de saisie en utilisant knockout.js, l'ancienne valeur est passée à la fonction de modification lorsque l'événement est déclenché. Je peux contourner cela en utilisant le flou. Est-ce le comportement prévu? Est-ce que l'idée d'utiliser l'événement de changement pour avoir l'ancienne valeur, puis utiliser un sélecteur normal pour obtenir la valeur du dom? Il semble trop intuitif.

JsFiddle Example

JavaScript ---------- var data = { saved_value:"1", value_changed: function(data){ alert(data.saved_value()); } }; var viewModel = ko.mapping.fromJS(data); ko.applyBindings(viewModel); HTML ---- Current Value:<span data-bind="text:saved_value"></span><br/> <input data-bind="event:{change:value_changed},value:saved_value"></input>

Essayez d'utiliser les liaisons texte et valeur:

 Current Value:<span data-bind="text: saved_value"></span><br/> <input data-bind="value: saved_value"></input>

Et modifiez le JavaScript à ceci:

 var data = { saved_value: "1" }; var viewModel = ko.mapping.fromJS(data); ko.applyBindings(viewModel);

Voici un jsFiddle associé: http://jsfiddle.net/6zmJs/

Si vous souhaitez alert() la valeur de saved_value lors de sa mise à jour, vous pouvez utiliser ko.computed ou viewModel.saved_value.subscribe(function(value) { alert(value); }); – même si ce ne sont pas les seules façons de le faire.

Non, ce n'est pas la bonne façon de faire les choses.

Vous obtenez l'ancienne valeur parce que save_value ne se met pas à jour jusqu'à ce que la zone de texte perd la mise au point.

Si vous souhaitez pousser la nouvelle valeur dans l'utilisateur, utilisez l'option valueUpdate de la liaison d'entrée:

 <input data-bind="event: { change: value_changed }, value: saved_value, valueUpdate: 'afterkeydown'" />

L'option valueUpdate prend un nom d'événement (p. Ex. 'Keyup'). Lorsque cet événement se déclenche, votre valeur enregistrée sera mise à jour.

Maintenant, laissez-moi proposer une solution de rechange.

Toujours faire la liaison valueUpdate comme je l'ai montré ci-dessus, mais au lieu d'écouter l'événement modifié, il suffit de vous inscrire à l'observable:

 <input data-bind="textInput: saved_value" />

Ensuite, dans JS:

 var viewModel = { saved_value: ko.observable("1"), }; viewModel.saved_value.subscribe(function (newValue) { alert(data.saved_value()); }); ko.applyBindings(viewModel);

Si vous mettez l'option 'événement' à la fin, vous n'avez pas besoin de l'option 'valueUpdate'. Comme ça:

<input data-bind="value: saved_value, event: { change: value_changed }" />

Notez également que lorsque vous utilisez l'abonnement à un observable, il se déclenche chaque fois que votre valeur change. (Par l'interaction de l'utilisateur ou par programme).

Essayez ceci dans les gestionnaires d'événements d'écriture de liaison de données, après les gestionnaires de valeur et pas avant:

 <input data-bind="value: property, event:{ change: doSomething}" />