JSFiddle - React, Tailwind, and code Playground

by Josh Carroll

HTML

<div id="weight" class="span2">
    <p><strong>Weight</strong>
    </p>
    <div class="control-group">
        <div class="input-append">
            <input data-bind="value: weight" id="weight_lb" type="text" class="input-small" placeholder="in lb."> <span class="add-on">lb.</span>

        </div>
    </div>
    <div class="control-group">
        <div class="input-append">
            <input data-bind="value: weight.asKilos" id="weight_kg" type="text" class="input-small" placeholder="in kg."> <span class="add-on">kg.</span>

        </div>
    </div>
</div>

JavaScript

ko.extenders.asKilos = function (target, precision) {
    //create a writeable computed observable to intercept writes to our observable
    var asKilos = ko.computed({
        read: function () {
            var kg_weight = parseFloat(target()) / 2.2;
            return !isNaN(kg_weight) ? kg_weight.toFixed(precision) : undefined;
        },
        write: function (newValue) {
            var lbs_weight = parseFloat(newValue) * 2.2;
            target(lbs_weight);
        }
    });

    target.asKilos = asKilos;

    return target;
};

function weightModel() {
    var weight = 180;
    self.weight = ko.observable(weight.toFixed(2))
        .extend({
        asKilos: 2
    });
}
ko.applyBindings(new weightModel());