JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://knockoutjs.com/js/knockout-2.2.0.js"></script>
<h2>Items</h2>

<ul id="top" data-bind="foreach: items">
    <li>Item <strong data-bind="text: name"></strong>
 <em>(DOM elem created <span data-bind="text: new Date"></span>)</em>

    </li>
</ul>
<button data-bind="click: simpleShuffle">Shuffle them</button>
<button data-bind="click: simpleAdd">Add Item</button>
<ul data-bind="foreach: items">
    <li>Item <strong data-bind="text: name"></strong>
 <em>(DOM elem created <span data-bind="text: new Date"></span>)</em>

    </li>
</ul>

JavaScript

function MyViewModel() {
    this.items = ko.observableArray([{
        name: 'Alpha'
    }, {
        name: 'Beta'
    }, {
        name: 'Gamma'
    }, {
        name: 'Delta'
    }]);

    this.simpleShuffle = function () {
        this.items.sort(function () {
            return Math.random() - 0.5; // Random order
        });
    };

    this.simpleAdd = function () {
        $("#top").append("<li>New item</li>");
    }
}



ko.applyBindings(new MyViewModel());


$('#top').bind('DOMNodeInserted DOMNodeRemoved', function () {
    alert('Changed')
});