JSFiddle - React, Tailwind, and code Playground

by Danish Farman

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.0/knockout-min.js"></script>
<h1 data-bind="text: monkey">
Monkey
</h1>
<input type="text" data-bind="value: monkey, valueUpdate: 'afterkeydown'" />
<input type="submit" data-bind="click: addAnimal" />
<ul data-bind="foreach: array">
  <li data-bind="text: $data"></li>
</ul>

JavaScript

var vm = {
  monkey: ko.observable(),
  array: ko.observableArray(),
  addAnimal: function() {
    this.array.push(this.monkey());
  }
};
vm.array.push('monkey');
vm.array.push('giraffe');
vm.array.push('animal');
vm.monkey("giraffe");
ko.applyBindings(vm);