JSFiddle - React, Tailwind, and code Playground

by bakhshi

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script>
<div id="main">
    <!--ko foreach:People-->
    <div data-bind="text:$root.ToUpper($root, $data) + ' - '+ new Date().getTime()"></div>
    <!--/ko-->
    <!--ko foreach:People-->
    <input data-bind="value:Name"/>
    <input type='checkbox' data-bind="checked:$root.SelectedPerson() && $root.SelectedPerson().Name() === Name(), click:$root.SetSelectedPerson"/>
    <br/>
    <!--/ko-->
    <label data-bind="text:SelectedPerson()?SelectedPerson().Name():'---'"/>
</div>

JavaScript

$(function(){
    function Person(name){
        this.Name = ko.observable(name);
    }
        
    data = {
        People:[
            new Person('reza'),
            new Person('Ron'),
            new Person('Jon'),
            new Person('Ankit')
        ],
        ToUpper : function(root, val){
            //debugger;
            if(!val.dummy)
                val.dummy = ko.observable(0);
            val.dummy();
            var selected = root.SelectedPerson.peek()
            var name = val.Name();
            console.log(name, selected?selected.Name():'---');
            return selected && selected.Name() === name? name.toUpperCase(): name;
        },
        SelectedPerson: ko.observable(null),
    }
    
    data.SetSelectedPerson = function(d){
        data.SelectedPerson(d);
        if(d.dummy)
            d.dummy(d.dummy()+1);
        if(data.oldPerson && data.oldPerson.dummy)
            data.oldPerson.dummy(data.oldPerson.dummy()+1);
    }
    
    var subscription = data.SelectedPerson.subscribe(function(v){
        data.oldPerson = v;
    }, null, 'beforeChange')
    
    ko.applyBindings(data, $("div#main")[0])
})