JSFiddle - React, Tailwind, and code Playground

by John Farrar

HTML

<script src="//cdn.jsdelivr.net/knockout/3.2.0/knockout.js"></script>
<ul data-bind="foreach: items">
    <li>
        <span data-bind="text: $data"></span>
        <button data-bind="click: $parent.removeItem">x</button> 
    </li>
</ul>

<input data-bind="value: newItem" />

<button data-bind="click: addItem, enable: newItem">Add</button>
<hr/>
<pre data-bind="text: ko.toJSON(changes, null, 2)"></pre>

JavaScript

var vm = {
    items: ko.observableArray(["one", "two", "three"]),

    newItem: ko.observable(),
    
    addItem: function() {
       vm.items.push(vm.newItem());
       vm.newItem("");
    },
    
    removeItem: function(item) {
       vm.items.remove(item);   
    },
    
    changes: ko.observable()
};

vm.items.subscribe(vm.changes, vm, "arrayChange");


ko.applyBindings(vm);