JSFiddle - React, Tailwind, and code Playground

by Sandeep Kumar

HTML

<div>
    <p>Please enter your name:</p>
    <p>First name: <input data-bind='value: firstName' /></p> 
    <p>Last name: <input data-bind='value: lastName' /></p> 
    <h2>Hello, <span data-bind='text: fullName'> </span>!</h2>  
</div>

JavaScript

// Knockoutjs data model
var ViewModel = function(firstName, lastName) {
		var self = this;
    self.firstName = ko.observable(firstName);
    self.lastName = ko.observable(lastName);
 
 		// Knockoutjs computed property which updates as soon as any update to firstName or lastName property.
    self.fullName = ko.computed(function() {
        return self.firstName() + " " + self.lastName();
    }, this);
};

// Bind view model with UI.
ko.applyBindings(new ViewModel("Sandeep", "Kumar"));