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);
};
} ();