JSFiddle - React, Tailwind, and code Playground

by gvanderberg

HTML

<div>
    <label>First Name:&nbsp;</label>
    <input data-bind="value: person.firstName"></input> 
    <span data-bind="text: person.firstName, click: onClick"></span>
    <br />
    <label>Last Name:&nbsp;</label>
    <input data-bind="value: person.lastName"></input> 
    <span data-bind="text: person.lastName"></span>
    <br />
    <label>Max Rows:&nbsp;</label>
    <input data-bind="value: maxRowSize"></input> 
    <span data-bind="text: maxRowSize"></span>
    <br />
    <label>Status Code:&nbsp;</label>
    <input data-bind="value: status.statusCode"></input> 
    <span data-bind="text: status.statusCode"></span>
    <br />
    <label>Status Desc:&nbsp;</label>
    <input data-bind="value: status.statusDescription"></input> 
    <span data-bind="text: status.DisplayName"></span>    
    <br />
    <label>Type Code:&nbsp;</label>
    <input data-bind="value: type.typeCode"></input> 
    <span data-bind="text: type.typeCode"></span>
    <br />
    <label>Type Desc:&nbsp;</label>
    <input data-bind="value: type.typeDescription"></input> 
    <span data-bind="text: type.DisplayName"></span>
    <br />
    <hr />
    <p>Last Run @ <span data-bind="text: lastRefresh"></span></p>
</div>

CSS

body {
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
}
div {
    background-color: #e2e2e2;       
    border: 1px solid lightgray;
    margin: 10px;
    padding: 10px;
    width: 100%;
}

JavaScript

var sampleApp = sampleApp || {};

//constructor for a person object
sampleApp.person = function (data) {
    var self = this;
    
    self.id = ko.observable(data ? data.id : 0);
    self.firstName = ko.observable(data ? data.firstName : 'Joe');
    self.lastName = ko.observable(data ? data.lastName : 'Bloggs');
    self.fullName = ko.computed(function () { return self.firstName() + ' ' + self.lastName() });
}

//constructor for a status object
sampleApp.status = function (data) {
    var self = this;
    
    self.statusCode = ko.observable(data ? data.statusCode : '123');
    self.statusDescription = ko.observable(data ? data.statusDescription : 'Status');
    self.DisplayName = ko.computed(function () { return self.statusDescription() + ' (' + self.statusCode() + ')' });
}

//constructor for a status object
sampleApp.type = function (data) {
    var self = this;
    
    self.typeCode = ko.observable(data ? data.typeCode : '456');
    self.typeDescription = ko.observable(data ? data.typeDescription : 'Type');
    self.DisplayName = ko.computed(function () { return self.typeDescription() + ' (' + self.typeCode() + ')' });
}

sampleApp.personViewModel = (function () {
    var self = this;

    self.maxRowSize = ko.observable(20);
    self.lastRefresh = ko.observable(new Date());
    
    self.onClick = function(){
        alert(person.fullName());
    };
    
    //private
    var person = new sampleApp.person();
    var status = new sampleApp.status();
    var type = new sampleApp.type();
    
    //public
    return {
        person: person,
        status: status,
        type: type
    }
})();

//hookup knockout to our viewmodel
ko.applyBindings(sampleApp.personViewModel);