JSFiddle - React, Tailwind, and code Playground

by Robert Dyson

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.3.0/knockout-debug.js"></script>
<div data-bind="with: MyForm">
    <p>First Name: <span data-bind="text: formValues.FirstName"></span></p> 
    <p>Last Name: <span data-bind="text: formValues.LastName"></span></p>
    <p>Full Name: <span data-bind="text: formValues.FullName"></span></p>
    
</div>

JavaScript

window.Test = window.Test || {};

Test.Main = function () {
    this.viewModel = {};
    this.setupViewModel();

    return {
        viewModel: this.viewModel
      
    };
};

Test.Main.prototype.setupViewModel = function () {
    var viewModel = function () {
        var vm = this;

        this.MyForm = {
            formValues: {
                FirstName: ko.observable("Joe"),
                LastName: ko.observable("Bloggs")
            }
         }
    };

    this.viewModel = new viewModel();

    this.viewModel.MyForm.formValues.FullName = ko.computed(function() {
        return this.FirstName() + " " + this.LastName();
    }, this.viewModel.MyForm.formValues);

    ko.applyBindings(this.viewModel);

    return this;
}
    
var mainApplication = new Test.Main();