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

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) - How to insert an item into an 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');