web-dev-qa-db-fra.com

Modification de l'événement de la boîte de saisie knockout.js - transmet l'ancienne valeur

Lors de l'ajout d'une liaison d'événement de modification à une zone de saisie à l'aide de knockout.js, l'ancienne valeur est transmise à la fonction de modification lorsque l'événement est déclenché. Je peux contourner ce problème en utilisant le flou. Est-ce le comportement souhaité? L'idée est-elle d'utiliser l'événement change pour avoir l'ancienne valeur, puis d'utiliser un sélecteur normal pour obtenir la valeur du dom? Cela semble contre-intuitif.

Exemple jsFiddle

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>
javascriptknockout.js
31
Ominus

Essayez d'utiliser les liaisons de texte et de valeur:

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

Et changez le JavaScript en 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 voulez 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); }); - bien que ce ne soit pas le seul façons de le faire.

6
kendaleiv

Mise à jour: pour les versions plus récentes de knockout, vous pouvez remplacer la liaison de valeur par textInput , qui gère de nombreux cas Edge non couverts par valueUpdate.

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

Vous obtenez l'ancienne valeur, car la valeur sauvegardée n'est pas mise à jour tant que la zone de texte n'a pas perdu le focus.

Si vous souhaitez insérer la nouvelle valeur au fur et à mesure que l'utilisateur tape, à l'aide de 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 (par exemple, `` keyup ''). Lorsque cet événement se déclenche, votre valeur sauvegardée sera mise à jour.

Maintenant, permettez-moi de proposer une solution alternative.

Faites toujours la liaison valueUpdate comme je l'ai montré ci-dessus, mais au lieu d'écouter l'événement modifié, abonnez-vous simplement à l'observable:

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

Puis en JS:

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

Si vous mettez l'option 'event' à 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 est déclenché chaque fois que votre valeur change. (soit par interaction de l'utilisateur, soit par programme).

10
Fragy

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}" />
3
Aigars Zeiza