JSFiddle - React, Tailwind, and code Playground

by Amanda Williamson

HTML

<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('zebra');
vm.array.push('giraffe');
vm.monkey("elephant");
ko.applyBindings(vm);