JSFiddle - React, Tailwind, and code Playground

by CyberLight

HTML

<script src="http://www.decorplanit.com/plugin/autoNumeric-1.7.5.js"></script>
<script src="http://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<div data-bind="foreach: humans">
    <div class="block-of-data">
        <div>
            <label class="label label-info">id</label>
            <span data-bind="text: id"></span>
        </div>
        <div>
            <label class="label label-info">Name</label>
            <span data-bind="text: name"></span>  
        </div>
        <div>
            <label class="label label-info">Count of friends</label>
            <input type="text" data-bind="numberMaskedValue: countOfFriends"/>
        </div>
        <div>
            <label class="label label-interest">Real value "Count of friends"</label>
            <span data-bind="text: countOfFriends"></span>
        </div>
    </div>
<div>

CSS

.block-of-data{
    border: solid 1px black;
    margin:10px;
    padding: 5px;
    background-color:#ffffaa;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

.label {
    padding: 1px 4px 2px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
.label {
    font-size: 10.998px;
    font-weight: bold;
    line-height: 14px;
    color: white;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    white-space: nowrap;
    vertical-align: baseline;
    background-color: #999;
}

.label-info {
    background-color: #3A87AD;
}

.label-interest {
    background-color: #ff7722;
}

JavaScript

$(function() {
    ko.bindingHandlers.numberMaskedValue = {
        init: function(element, valueAccessor, allBindingsAccessor) {
            var options = allBindingsAccessor().autoNumericOptions || {
                aSep: ',',
                aDec: '.',
                mDec: 0
            };
            $(element).autoNumeric(options);
            ko.utils.registerEventHandler(element, 'focusout', function() {
                var observable = valueAccessor();
                value = $(element).autoNumericGet();
                observable(isNaN(value) ? 0 : value);
            });
        },
        update: function(element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor());
            $(element).autoNumericSet(value);
        }
    };

    function Human(idv, namev, countOfFriendsv) {
        var id = ko.observable(idv),
            name = ko.observable(namev),
            countOfFriends = ko.observable(countOfFriendsv);

        return {
            id: id,
            name: name,
            countOfFriends: countOfFriends
        }
    }

    function HumansModel() {
        humans = ko.observableArray([new Human(1,'Alex', 1234), new Human(2,'Bob',12457)]);        
    }
    
    ko.applyBindings(new HumansModel())
});