36

When adding a change event binding to an input box using knockout.js the old value is passed to the change function when the event is fired. I can work around this by using blur. Is this the intended behavior? Is the idea to use the change event to have the old value and then use a normal selector to get the value from the dom? It seems counter intuitive.

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>
Ominus
  • 5,501
  • 8
  • 40
  • 44

4 Answers4

81

Update: For newer versions of knockout, you can replace the value binding with textInput, which handles many edge cases not covered by valueUpdate.

No, this is not the right way to do things.

You're getting the old value because saved_value doesn't get updated until the textbox loses focus.

If you want to push the new value in as the user types, using the valueUpdate option of the input binding:

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

The valueUpdate option takes an event name (e.g. 'keyup'). When that event fires, your saved_value will be updated.

Now let me propose an alternate solution.

Still do the valueUpdate binding like I showed above, but instead of listening for the changed event, just subscribe to the observable:

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

Then in JS:

var viewModel = {
    saved_value: ko.observable("1"),
};
viewModel.saved_value.subscribe(function (newValue) {
   alert(data.saved_value());
});
ko.applyBindings(viewModel);
jpaugh
  • 6,634
  • 4
  • 38
  • 90
Judah Gabriel Himango
  • 58,906
  • 38
  • 158
  • 212
  • 2
    I have to use 'afterkeydown', otherwise I'm one character late. – Thomas Eyde Aug 15 '13 at 11:36
  • Is there a reason why not using the `textInput binding`? The documentation of KO recommends to use the `textInput binding` instead of the `value binding`: http://knockoutjs.com/documentation/textinput-binding.html "Although the value binding can also perform two-way binding between text boxes and viewmodel properties, you should prefer textInput whenever you want immediate live updates." – Andrew Dec 30 '14 at 12:58
  • Yes. The reason is that this answer was written before textinput binding existed. – Judah Gabriel Himango Jan 05 '15 at 15:15
  • 1
    Updated the answer to use the new textInput binding. – Judah Gabriel Himango Jan 05 '15 at 15:23
  • the alternative solution was exactly what I was looking for when I needed a proper "text input changed" event handler. – Johan Danforth Jul 04 '16 at 06:59
  • @JudahHimango I almost used your solution in a much newer version of Knockout, so I figured it was worth mentioning the textInput binding. – jpaugh Mar 16 '18 at 16:11
13

If you put the 'event' option at the end you don't need the 'valueUpdate' option. Like this:

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

Also note that when you make use of subscribe to an observable, it gets triggered every time your value changes. (either by user interaction or programmatically).

Fragy
  • 139
  • 2
  • 1
    So the order in which items are in "data-bind" has relevance? Is there document somewhere that explains what rules should be followed so that I might avoid future gotchas? – Ominus Mar 14 '12 at 12:01
  • 1
    Yes, the order matters, they happen in order from left to right (depending somewhat on their functionality) – pilavdzice Apr 24 '12 at 20:34
  • Just throwing this out there, but if you're using the "checked" binding, using event at the end *does not* make it wait until the data has changed. It will still use the old value. – Andrew Aug 04 '14 at 18:10
  • As of knockout v3.4.0, this is incorrect. Perhaps it was a bug? – jpaugh Mar 16 '18 at 16:02
8

Try using the text and value bindings:

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

And change the JavaScript to this:

var data = {
    saved_value: "1"    
};

var viewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModel);​

Here's an associated jsFiddle: http://jsfiddle.net/6zmJs/

If you want to alert() the value of saved_value when it is updated you could use ko.computed or viewModel.saved_value.subscribe(function(value) { alert(value); }); -- although those aren't the only ways to do this.

kendaleiv
  • 5,793
  • 3
  • 28
  • 38
3

Try this in the data bind write event handlers, after the value handlers and not before:

<input data-bind="value: property, event:{ change: doSomething}" />
Nathaniel Ford
  • 20,545
  • 20
  • 91
  • 102
Aigars Zeiza
  • 39
  • 5