JSFiddle - React, Tailwind, and code Playground

by Sebin Simon

HTML

<div class='liveExample'>   
    <p>First name: <input data-bind='value: firstName' /></p> 
    <p>Last name: <input data-bind='value: lastName' /></p> 
    
    <label><input name="Test" type="radio" value="true" data-bind="checked: radioSelectedOptionValue" />Alpha</label>
                <label><input name="Test" type="radio" value="false" data-bind="checked: radioSelectedOptionValue" />Beta</label>
    <h2>Hello, <span data-bind='text: fullName'> </span>!</h2>  
    <p>Everything-<span data-bind="text: everything"></span></p>  
</div>

CSS

body { font-family: arial; font-size: 14px; }
.liveExample { padding: 1em; background-color: #EEEEDD; border: 1px solid #CCC; max-width: 655px; }
.liveExample input { font-family: Arial; }
.liveExample b { font-weight: bold; }
.liveExample p { margin-top: 0.9em; margin-bottom: 0.9em; }
.liveExample select[multiple] { width: 100%; height: 8em; }
.liveExample h2 { margin-top: 0.4em; font-weight: bold; font-size: 1.2em; }

JavaScript

// Here's my data model
var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.radioSelectedOptionValue = ko.observable('false');
    this.everything = this.radioSelectedOptionValue;
   console.log(this.everything())
   if(this.everything() === true ){
        console.log('b');
        this.lastName = ko.observable(last);
    }else{
        console.log('a');
         this.lastName = ko.computed(function() {
             return  this.firstName();
    	}, this);
    }
    
 
    this.fullName = ko.computed(function() {
        // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
        return this.firstName() + " " + this.lastName();
    }, this);
    
    
};
 
ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work