JSFiddle - React, Tailwind, and code Playground

by Salmin Skenderovic

HTML

<label>OBJ: </label><span data-bind="text: ko.toJSON(observableObject)"></span>
            
<label>STR: </label><span data-bind="text: ko.toJSON(observableString)"></span>

CSS

body {
  background: #fff;
}

.grey {
  color: gray;
}

.disabled {
  text-decoration: line-through;
  color: #ccc;
}

.outer {
  position: static;
  z-index: 999;
  width: 100%;
  margin: 100px 0px 0px 5px;
  height: 100px;
}

.inner {
  float: left;
  width: 100%;
  font-size: 20px;
}

.dropdown {
  width: 100%;
  float: left;
}

button {
  height: 32px;
  font-size: 18px;
  margin: 5px;
}

.dropdown-button {
  height: 42px;
  width: 45%;
  margin: 5px;
  float: left;
  font-size: 24px;
}

.education {

}

li {
  margin-left: 20px;
}

.current-scripts {
  height: 200px;
}

.bg-white {
  background-color: #fff;
}

.bg-red {
  background-color: #f00;
}

.bg-ccc {
  background-color: #ccc;
}

.container {
  width: 800px;
  margin: 0 auto;
}

JavaScript

function ViewModel() {

	var self = this;
  
  self.observableObject = ko.observable(new Object());
  self.observableString = ko.observable("");

  var key = "myKey";
  
  self.myFunction = function() {
      self.observableObject[key] = "test";
      self.observableString("string");
  }
  

}

var vm = new ViewModel();
ko.applyBindings(vm);


  setTimeout(function(){
  	vm.myFunction();
  }, 1000);