JSFiddle - React, Tailwind, and code Playground

by shubh0602

HTML

<script src="https://github.com/downloads/SteveSanderson/knockout/knockout-2.1.0.js"></script>
<script src="https://github.com/SteveSanderson/knockout.mapping/edit/master/build/output/knockout.mapping-latest.debug.js"></script>
ID:<input data-bind="value:id"/><br/>
First Name:<span data-bind="text:firstName"/>

JavaScript

//Defining Model
var model={
    "ID":"XXXX111",
    "FirstName":"Shubh",
    "LastName":"Dasgupta",
    "Organization":"Collabera",
    "DateOfJoining":"06-Feb-2011"
};

//Defining ViewModel

var vm={
    id:ko.observable(model.ID),
    firstName:ko.observable(model.FirstName),
    lastName:ko.observable(model.LastName),
    org:ko.observable(model.Organization),
    doj:ko.observable(model.DateOfJoining)
    
};


var vmObjectLiteral=function(){
    this.id=ko.observable(model.ID),
    this.firstName=ko.observable(model.FirstName),
    this.lastName=ko.observable(model.LastName),
    this.org=ko.observable(model.Organization),
    this.doj=ko.observable(model.DateOfJoining)
    
};


vm.email = ko.computed(function(){
    return this.firstName() + " " + this.lastName() +"@collabera.com" ;
},vm);

//Applying Bindings
ko.applyBindings(vm);