JSFiddle - React, Tailwind, and code Playground

by Yevgeniy

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
Name:
<input type="text" data-bind="value: name, valueUpdate: 'afterkeydown'" />
<input type="checkbox" data-bind="checked: nameVisible" />
<p>
  Hello, <span data-bind="text: name, visible: nameVisible"></span>
  <br />
  <span data-bind="text: displayName"></span>
</p>
<button data-bind="click: changeName">
  Change name
</button>

JavaScript

$(function() {
  var vm = {
    name: ko.observable("bob"),
    changeName: function() {
      this.name("steve");
    },
    nameVisible: ko.observable(true),
    //displayName: ko.computed(function() {
      //return this.name() + " is" + (!this.nameVisible() ? " not " : "") + " visible.";
    //}, this)

  };

  vm.displayName = ko.computed(function() {
    return this.name() + " is" + (!this.nameVisible() ? " not " : "") + " visible.";
  }, viewModel);

  ko.applyBindings(vm);
});