JSFiddle - React, Tailwind, and code Playground

by smacky311

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<div>formatted value for user display</div>
<input type="text" data-bind="value: formattedUnitOfCost" id="Model_Bound_ID" />

<div>unformatted value (the one I'd like to save) but this is not model bound</div>
<input type="text" data-bind="value: unitOfCost" />

JavaScript

function AppViewModel() {
    var self = this;
    
            self.unitOfCost = ko.observable(1.01).extend({
                isServerSet: false
            });
            self.formattedUnitOfCost = ko.computed({
                read: function () {
                    return '$' + self.unitOfCost().toFixed(2);
                },
                write: function (value) {
                    // Strip out unwanted characters, parse as float, then write the raw data back to the underlying "price" observable
                    value = parseFloat(value.replace(/[^\.\d]/g, ""));
                    self.unitOfCost(isNaN(value) ? 0 : value); // Write to underlying storage
                },
                owner: self
            });
}

ko.applyBindings(new AppViewModel());