JSFiddle - React, Tailwind, and code Playground

by Swensson

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-debug.js"></script>
<div id="greetingView">
        <input type="text" data-bind="value: firstName" placeholder="Firstname" />
        <input type="text" data-bind="value: lastName" placeholder="Lastname" />
        <p>Fullname: <b data-bind="text: fullName()"></b></p>
</div>

JavaScript

// Knockout: Bind
var ViewModel = function() {
  var self = this;

  // public members
  self.firstName = ko.observable("");
  self.lastName = ko.observable("");
  
  self.fullName = ko.computed(fullName, self);
  function fullName() {
    var self = this;
    return self.firstName() + " " + self.lastName();
  }
}

var VM = new ViewModel();
ko.applyBindings(VM, document.getElementById("greetingView"));