5

how do i insert element in knockout array at specific index

I understand we have to use slice and push, but what is the best way and how to insert new element at specific position in observable array

ritzy
  • 61
  • 1
  • 4
  • Possible duplicate of [How to add/insert an item into an ObservableArray at a certain position with Knockout.js](http://stackoverflow.com/questions/7317907/how-to-add-insert-an-item-into-an-observablearray-at-a-certain-position-with-kno) – Homer Oct 07 '15 at 20:23

2 Answers2

6

Use splice. The docs aren't real clear on this (I had to double check it myself), but you can use this just like the regular javascript .splice to insert elements as well as remove them. For example:

var vm = {
    array : ko.observableArray(["foo","bar"])
};

ko.applyBindings(vm);

function Add() {
    vm.array.splice(1,0,"ra");    // at index 1 - remove 0 elements and add "ra"
}

Add();   // "ra" gets inserted between "foo" and "bar"

http://jsfiddle.net/aL4D6/

Matt Burland
  • 44,552
  • 18
  • 99
  • 171
  • Matt, just because I'm curious, why not define the `add` function as part of your view model? It has a dependency on vm existing in the global namespace right now. Instead you could insert the function as an additional property when defining `vm` as in this [fiddle](http://jsfiddle.net/zLLnF/). Then, you can even interact with the function through binding as well as in this [fiddle](http://jsfiddle.net/zLLnF/1/)(great answer btw, I +1'd you) – KyleMit Apr 16 '14 at 20:45
  • @KyleMit: Because I was banging something together quickly to demonstrate the principle. Without a doubt I would put it in the VM in practice. – Matt Burland Apr 17 '14 at 15:28
  • Yeah, fair enough. I'm new to knockout, so I didn't know if there was something else in play. The question left a lot of imagination to the implementation. – KyleMit Apr 17 '14 at 15:41
  • Thanks Matt, This code works but doesn't do auto ui refresh, I had to write valueWillMutate() & valueHasMutated() for auto UI refresh to work, do you have idea on what they do? Thanks again. – ritzy Apr 23 '14 at 10:22
  • @ritzy: It works fine in my fiddle. You must have something else going on. If you ask another question and include you code (preferably in a fiddle), somebody can probably help you. – Matt Burland Apr 23 '14 at 13:05
2

I you can do it normally with splice (no reasons for slice and push, because splice can actually do this). Just put you starting position and then 0 to specify that you actually do not want to remove an item, and only add.

var ViewModel = function() {
    this.list = ko.observableArray([1, 2, 3, 5]);
};
vm = new ViewModel();
ko.applyBindings(vm);

So if you then do something like 

vm.list.splice(3,0, 'new element');

it will insert it at specific location in the array. Surely you can put this code inside of the model and bind it to some event.

Salvador Dali
  • 214,103
  • 147
  • 703
  • 753
  • How do you get access to the bound ViewModel to splice it - the copy and paste of the code seems to not work in this fiddle http://jsfiddle.net/3vCdD/ – KyleMit Apr 16 '14 at 20:19
  • @KyleMit sorry for this. Updated fiddle is here (answer updated as well): http://jsfiddle.net/3vCdD/1/ – Salvador Dali Apr 16 '14 at 20:41