Knockout percentage conversion

Experiments in creating binding handlers and computed observables for handling percentages in viewmodels.

by Quango

HTML

<b>Knockout Writeable Computed Test</b>

<br/>Raw value:
<input data-bind="value: Commission" />
<br/>Display value:
<input data-bind="value: CommissionPercentage" />
<hr/>
<span data-bind="text: CommissionText">..</span>

JavaScript

// viewmodel with a computed observable
function PercentageTest(commission) {
    var _this = this;
    // percentage value
    this.Commission = ko.observable(commission);
    // writeable computed value
    this.CommissionPercentage = ko.computed({
        read: function () {
            return _this.Commission() * 100;
        },
        write: function (newValue) {
            var amended = parseFloat(newValue) / 100;
            _this.Commission(amended);
        }
    });
    // confirm
    this.CommissionText = ko.computed(function () {
        return "Commission value is " + _this.Commission() + " which is " + _this.CommissionPercentage() + "%";
    });
}

var vm = new PercentageTest(0.5);
ko.applyBindings(vm);