JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.js"></script>
<ul data-bind="foreach: items">
<li data-bind="text: $data"></li>
</ul>

<strong>Times array has changed:</strong>
<p data-bind="text: counter"></p>

<button id="btnInsert">Insert</button>
<button id="btnPush">Push</button>

JavaScript

// Insert items at beginning of the array
ko.observableArray.fn.insertAll = function (items) {
    this.unshift.apply(this, items);
};

// Push all items to the end of the array
ko.observableArray.fn.pushAll = function (items) {
    this.push.apply(this, items);
};

var vm = {
    counter: ko.observable(0),
    items: ko.observableArray([0])
};

vm.items.subscribe(function () { vm.counter(vm.counter() + 1); });

ko.applyBindings(vm);

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

$("#btnInsert").click(function () {
    vm.items.insertAll(arr);
});

$("#btnPush").click(function () {
    vm.items.pushAll(arr);
});