JSFiddle - React, Tailwind, and code Playground

by smacky311

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<div>First Name</div>
<input type="text" data-bind="value: FirstName, valueUpdate: 'afterkeydown'" />
<div>Last Name</div>
<input type="text" data-bind="value: LastName, valueUpdate: 'afterkeydown'" />
<div>Full Name</div>
<input type="text" data-bind="value: FullName" />

JavaScript

ko.applyBindings(new viewModel());

function viewModel(){
    var self = this;
    //var model = {};
    var model = {
        FirstName : "bubba",
        LastName : "gump"
    };
    
    bindModel(self, model);
}

function bindModel(self, model) {
    if(model.FirstName){
        self.FirstName = ko.observable(model.FirstName);    
    }else{
        self.FirstName = ko.observable('');    
    }
    if(model.LastName) {
        self.LastName = ko.observable(model.LastName);        
    }else{
        self.LastName = ko.observable('');       
    }
    
    self.FullName = ko.computed(function(){        
    return self.FirstName() + " " + self.LastName();}
                                , self);   
}