JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="debug"> <span id="name" data-bind="text:personName">Avi</span>
 <span id="age" data-bind="text:personAge"></span>

  <span
  id="info">Not Listening...</span>
    <div>
      <button id="btnChangeName">Change Name</button>
      <button id="btnStartListening">Start Listening</button>
      <button id="btnStopListeningName">Stop Listening</button>
    </div>
</div>

JavaScript

var myViewModel = {
  personName: ko.observable("Avi"),
  personAge: ko.observable(43)
};
var subscribe;

ko.applyBindings(myViewModel, $("#name")[0]);
ko.applyBindings(myViewModel, $("#age")[0]);

$("#btnStartListening").on("click", function () {
  subscribe = myViewModel.personAge.subscribe(function (newValue) {});
  $("#age").css("color", "#ff0000");
  $("#info").html("Listening...")

});

$("#btnStopListeningName").on("click", function () {
  subscribe.dispose();
  $("#age").css("color", "#000");
  $("#info").html("Not Listening...")
});

$("#btnChangeName").on("click", function () {
  myViewModel.personAge(Math.floor((Math.random() * 100) + 1));
});