How to add/insert an item into an ObservableArray at a certain position with Knockout.js

All the knockout examples I have found seem to add a new item to the end of an ObservableArray using something like:

viewModel.SomeItems.push(someNewItem);

This of course places the item at the end of the array.

How to I add an item to the ObservableArray at a certain position?

eg. something like:

viewModel.SomeItems.push(someNewItem, indexToInsertItAt);

You should be able to use the native JavaScript splice method -

viewModel.SomeItems.splice(2,0,someNewItem);

Docs here - https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/splice

Example here (not Knockout specific) - https://stackoverflow.com/questions/586182/javascript-insert-item-into-array-at-a-specific-index

From the Knockout docs -

> For functions that modify the contents of the array, such as push and > splice, KO’s methods automatically trigger the dependency tracking > mechanism so that all registered listeners are notified of the change, > and your UI is automatically updated.

For knockout use

viewModel.SomeItems.unshift(someNewItem);

See also: http://knockoutjs.com/documentation/observableArrays.html

I made this extension function which worked nicely for me. Splice wasn't working for me if I was adding to the end of a sparse array.

ko.observableArray.fn.setAt = function(index, value) {
    this.valueWillMutate();
    this()[index] = value;
    this.valueHasMutated();
}

This even works with:

var a = ko.observableArray(['a', 'b', 'c']);
a.setAt(42, 'the answer');