Index of array list

by MattiasBuelens

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<ul data-bind="foreach: itemList">
    <li>
        <input type="button" data-bind="click: $root.moveup" value="UP" />
        <input type="button" data-bind="click: $root.movedown" value="DWN" /><span data-bind="text: itemName"></span>
    </li>
</ul>

CSS

li {
    list-style: none;
    margin:5px;
}
li span {
    margin-left:10px;
}

JavaScript

function myAppViewModel() {
    var self = this;

    self.itemList = ko.observableArray([{
        itemName: "Item 1"
    }, {
        itemName: "Item 2"
    }, {
        itemName: "Item 3"
    }, {
        itemName: "Item 4"
    }]);
    self.moveup = function (itemIndex) {
        var i = self.itemList.indexOf(itemIndex);
        if (i >= 1) {
            var array = self.itemList();
            self.itemList.splice(i - 1, 2, array[i], array[i - 1]);
        }
        console.log(i)
    }
    self.movedown = function (itemIndex) {
        var i = self.itemList.indexOf(itemIndex);
        var array = self.itemList();
        if (i < array.length - 1) {
            self.itemList.splice(i, 2, array[i + 1], array[i]);
        }
        console.log(i)
    }
}
ko.applyBindings(new myAppViewModel());