Name Address Phones
Edit




Phones


Add phone

or cancel

View model

var Person = function (firstName, lastName, address, phones) {
    var self = this;
    self.FirstName = ko.observable(firstName);
    self.LastName = ko.observable(lastName);
    // 
    self.Phones = ko.observableArray(ko.utils.arrayMap(phones, function (phone) {
        return { Number: ko.observable(phone.number), Title: ko.observable(phone.title) };
    }));
    self.Address = {
        Country: ko.observable(address.country),
        City: ko.observable(address.city)
    };

    self.FullName = ko.dependentObservable(function () {
        return self.FirstName() + ' ' + self.LastName();
    });
    self.AddressString = ko.dependentObservable(function () {
        return self.Address.Country() + ', ' + self.Address.City();
    });

    ko.editable(self); // Enable ko.editbales

    self.AddPhone = function () {
        self.Phones.push({ Number: ko.observable(), Title: ko.observable() });
    };
};

var viewModel = new function () {
    var self = this;
    self.Contacts = [
            new Person('Eduard', 'Trapeznichenko', { country: 'USA', city: 'New York' }, [{ title: 'Mobile', number: '(123) 456-78-90'}]),
            new Person('Peter', 'Archibald', { country: 'Ukraine', city: 'Kiev' }, [{ title: 'Mobile', number: '(012) 345-67-89' }, { title: 'Work', number: '(212) 777-77-77'}])
        ];

    self.EditingPerson = ko.observable();

    self.Edit = function (person) {
        var currentEdititngPerson = self.EditingPerson();

        if (currentEdititngPerson && currentEdititngPerson != person) {
            if (currentEdititngPerson.hasChanges()) {
                if (confirm('Your have unsaved changes. Press Ok to cancel these changes. Press Cancel to continue editing')) {
                    currentEdititngPerson.rollback();
                } else {
                    return;
                }
            };
        }

        ko.editable(person);
        person.beginEdit();
        self.EditingPerson(person);
    };


    self.Update = function () {
        self.EditingPerson().commit();
        self.EditingPerson(undefined);
    };

    self.Cancel = function () {
        self.EditingPerson().rollback();
        self.EditingPerson(undefined);
    };
} ();