Prevent knockout textInput data-bind from updating the field value while typing

Question

I have this (very simplified) HTML:

<label>Quantity: <input name="quantity" type="number" data-bind="textInput: quantity"/></label>
<label>Euros: <input name="wholeNumber" type="number" data-bind="textInput: wholeNumber"/></label>

And this (also very simplified) Knockout model:

function ViewModel() {
    self = this;
    cents = ko.observable();
    quantity = ko.observable();
    wholeNumber = ko.computed({
        read: function() {
            return (self.cents() / 100).toFixed(2); 
        },
        write: function(value) {
            self.cents(Math.round(value * 100));
        }
    });
}

ko.applyBindings(ViewModel);

See this fiddle for a running example: https://jsfiddle.net/KHFn8/5569/

When I run this code the value of the quantity does not refresh while typing, but the value of the wholeNumber does change after each keystroke.

I have two questions about this:

1. Since both fields have a two way binding why does this only happen in the case of the computed observable (wholeNumber), but not in the case of a normal observable?
2. How can I prevent the updating of the field from happening while I'm still typing. I can use wholeNumber.extend({ rateLimit: { timeout: 500, method: "notifyWhenChangesStop" } });, but that's an suboptimal solution.

Answer 1

As an answer to your first question on why it does happen with computed binds but not with normal observables:

Let's consider wholeNumber binding. Every time the value of the input field changes, dom-to-computable binding executes setter write, which in his turn updates cents; because the computed wholeNumber depends on cents observable it is subscribed to all its changes, so the change of cents causes computable-to-dom binding to execute read and update the input (and moves the cursor to the the end of the input field). Here is a slightly updated jsfiddle, with logging of getter/setter calls (https://jsfiddle.net/mdydarfb/)

In the case of an ordinary observable, every change of the input field updates only the state of the binded observable without that "chain reaction".

As an answer to the second qustion:

If I understood the problem properly, "turning the tables" on your original code would be sufficient: just make cents pureComputed and wholeNumber observable and bind them together - http://jsfiddle.net/uvmqk4sd/1

Answer 2

1. About quantity property. If you want to update it when wholeNumber is changing you need to change your wholeNumber computed definition. Because now it changes only cents:

   write: function(value) {
       self.cents(Math.round(value * 100));
   }
   

2. Regarding wholeNumber.extend({ rateLimit: { timeout: 500, method: "notifyWhenChangesStop" } }); Why do you think it's suboptimal? It's "official" recipe from the documentation - http://knockoutjs.com/documentation/rateLimit-observable.html

Answer 3

Becauase it has any process in computed function about quantity. You must add quantity in function. For example;

wholeNumber = ko.computed({
    read: function() {
        return (self.cents() / 100 * self.quantity()).toFixed(2);
    },
    write: function(value) {
        self.cents(Math.round(value * 100));
    }
});