Question

Im a knockoutjs newbie, Basically what I want to do on the page is, I load a list of activation Details in the view,
each with a remove link associated with a list item.
each activation detail item contains three properties, index,ActivationDate and ExpiryDate,
eg.

    var activationItem = {
            'index': count,
            'activationDate': item.activationDate,
            'expiryDate': item.expiryDate
        };

Now everytime a user clicks remove on any particular item. it should re-order all the lists index to still reflect properly incremented indexes. eg 1,2,3,4 instead of 1,3,4 if item 2 was removed.

How’ve done it is replacing the array. as follows:

       //Removes selected item from activationlist
self.RemoveActivationListItem_Click = function () {

    self.activationListItems.remove(this);

    var count = 1;
    var replaceArray = ko.observable([]);

    //Re index all of the array items
    ko.utils.arrayForEach(self.activationListItems(), function(item) {

        var activationItem = {
            'index': count,
            'activationDate': item.activationDate,
            'expiryDate': item.expiryDate
        };

        replaceArray().push(activationItem);

        count++;

    });

    self.activationListItems.removeAll();
    self.activationListItems(replaceArray());

    TINY.box.show({ html: "Activation item removed", animate: true, close: false, boxid: 'message',autohide:5,top:90,left:0});

};

Is there not a better method than this?

Answer 1

If want just display index property you can use $index knockout object in foreach binding and ko does all work by himself. See example here: http://jsfiddle.net/AfDQe/1/

If you need to store index in view model you could simplify your remove function:

self.RemoveActivationListItem_Click = function () {
    self.activationListItems.remove(this);
    var count = 1;

    //Re index all of the array items
    ko.utils.arrayForEach(self.activationListItems(), function(item) {
        item.index = count;
        count++;

    });

    TINY.box.show({ html: "Activation item removed", animate: true, close: false, boxid: 'message',autohide:5,top:90,left:0});

};