Add always in first position a record with Knockoutjs binding

Question

I have the following simple form that uses KnockoutJS for managing the collections.

What I need is to always place the New Record on top and also Visitor 1 title should increment if adding new.. so Visitor 2, Visitor 3, and so on.

Also I shouldn't be able to delete a record when there is only 1. So at least I should have always one record.

Here is my html code:

<div>
<div class="panel" data-bind="foreach: contacts">
                            <div>
                                <h4>Visitor 1</h4>
                            </div>

                            <div>
                                <!-- ## Panel Content  -->
                                <div >
                                    <label>First Name</label>
                                    <input type="text" data-bind='value: firstName' />
                                </div>

                                <div >
                                    <label>Last Name</label>
                                    <input type="text" data-bind='value: fathersLast' />
                                </div>

                                <div >
                                    <label>Country</label>
                                    <input type="text" data-bind='value: country' />
                                </div>
                                 <button data-bind='click: $root.removeContact'>Delete</button>  <button data-bind='click: $root.addContact'>Add New</button>
                                <!-- ## / Panel Content  -->
                            </div>
                        </div>
</div>

Here is my JavaScript code:

var initialData = [
    { firstName: "John", fathersLast: "Smith", country : "USA"
    },
    { firstName: "George", fathersLast: "Fox", country : "Canada"
    }
];

var ContactsModel = function(contacts) {
    var self = this;
    self.contacts = ko.observableArray(ko.utils.arrayMap(contacts, function(contact) {
        return { firstName: contact.firstName, fathersLast: contact.fathersLast, country: contact.country };
    }));

    self.addContact = function() {
        self.contacts.push({
            firstName: "",
            fathersLast: "",
            country: ""
        });
    };

    self.removeContact = function(contact) {
        self.contacts.remove(contact);
    };
};

ko.applyBindings(new ContactsModel(initialData));

Also for better reference here is the jsFiddle: http://jsfiddle.net/9k5uT/1/

Thanks a lot.

Answer 1

Use unshift() to add something to the beginning of an array.

self.addContact = function() {
        self.contacts.unshift({
            firstName: "",
            fathersLast: "",
            country: ""
        });
    };

You can use $index to refer to the current index of the array that's being iterated over (it's an observable, so you need to add the parenthesis).

<h4 data-bind="text: 'Visitor ' + ($index() + 1)"></h4>

Finally, you can prevent removal of the last contact with a simple if statement checking the length (it may be prudent to add an alert otherwise):

self.removeContact = function(contact) {
    if (self.contacts.length > 1) {
        self.contacts.remove(contact);
    }
};