Question

I am using KnockoutJS and I have an input control that displays a number from my model.

Everything works fine, however I’d like to format my number before displaying it in the input control – but I want to keep it as a number to my view! So, let’s say that I have the following code:

<td><input class='requiredNum' type='text' data-bind="value: testNum"></input></td>

I have a function toText() that converts the number to what I need. However, this doesn’t work:

<td><input class='requiredNum' type='text' data-bind="value: toText(testNum)"></input></td>

I can understand that the problem is that Knockoutjs doesn’t know how to do the opposite (convert from text to number) – however this is not a problem to me because I already handle that in another way.

Can you recommend me a solution?

Answer 1

The easiest solution is to use a writeable dependentObservable.

var viewModel = {
    number: ko.observable(10)
};

viewModel.formattedNumber = ko.dependentObservable({
  read: function() {
     //do formatting on this.number() here
     return this.number().toFixed(4);
  },
  write: function(newValue) {
     //take user input and parse into a number
     this.number(parseFloat(newValue));
  },
  owner: viewModel
});

Sample:
http://jsfiddle.net/rniemeyer/8bsAF/