I always wanted to write an extender. So here comes another answer to your question that is implemented via a knockout extender.
I'm still undecided wether I like this one or the one with the Percentage class better.
HTML
<input data-bind="value: p1.percentage, valueUpdate: 'afterkeydown'"></input>%
= <span data-bind="text: p1"></span>
JavaScript
ko.extenders.percentage = function(target, option) {
target.percentage = ko.computed({
read: function() {
return this() * 100;
},
write: function(value) {
this(value/100);
},
owner: target
});
return target;
};
var model = {
p1: ko.observable(0.5).extend({'percentage': true})
}
ko.applyBindings(model)