JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/knockout-latest.debug.js"></script>
<h3>Display selected value as a percent</h3>
<select data-bind="options: data, optionsText: 'name', optionsCaption: 'Choose...', value: selOption"></select>
<button data-bind="click: addData, enable: typeof(selOption()) !== 'undefined'">+</button>

<div data-bind="foreach: chosenOptions">
    <div>
        <span data-bind="text: $data.name"></span>
        <input data-bind="value: $data.percent" />
    </div>
</div>

JavaScript

ko.extenders.formatAsPercent = function(target, option) {
    var result = ko.computed({
        read:  function(newValue) { 
           
            var val = (""+newValue).replace('%', '');
            console.log(val);
            if(val === "undefined" ) return target();
            else { target(parseInt(val, 10) / 100); return target();}
        },
        write: function(newValue) {
            var current = target();
            if (typeof(current) === 'undefined') target('');
            else target((current * 100).toFixed(2) + '%');        
        }
    });
    
    result(target());
    
    return result;
}


function viewModel() {
    var self = this;

    self.data = [
        {
        name: 'Test1',
            percent: ko.observable(.1).extend({ formatAsPercent : 0})},
    {
        name: 'Test2',
        percent: ko.observable(.543)},
    {
        name: 'Test3',
        percent: ko.observable(.0123)}
    ];
    self.selOption = ko.observable();
    self.chosenOptions = ko.observableArray();
    self.addData = function() {
        if (typeof(self.selOption) !== 'undefined') {
            self.chosenOptions.push(self.selOption());
            self.selOption(undefined);
        }
    }

}

ko.applyBindings(new viewModel());