How to create converter in knockout.js?

@raven_corwin 

To create a converter in Knockout.js, you can use the ko.extenders method to create a custom binding handler that converts the input value to the desired format. Here is a step-by-step guide on how to create a converter in Knockout.js:

1. Define a custom binding handler using the ko.extenders method:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

ko.extenders.converter = function (target, converter) {
    target.converted = ko.computed({
        read: function () {
            return converter(target());
        },
        write: function (newValue) {
            target(newValue);
        }
    });

    return target;
};

1. Apply the custom binding handler to a Knockout observable:

1
2

var input = ko.observable("5");
var formattedInput = input.extend({ converter: parseFloat });

In this example, the formattedInput observable will automatically convert the input value to a float using the parseFloat function whenever the value of input changes.

1. Use the formatted input in your HTML markup:

1
2

<input type="text" data-bind="value: input, valueUpdate: 'input'" />
<p>Converted Input: <span data-bind="text: formattedInput.converted"></span></p>

By following these steps, you can create a custom converter in Knockout.js to format and manipulate the input values in your view models.