Value-binding without overwriting the element value property

https://groups.google.com/d/topic/knockoutjs/K-xyD1PghMk/discussion

HTML

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<div id='contactsList'>
    <!-- ko foreach: contacts -->
    <ul class='contactsEditor'>
        <li>Person #<span data-bind="text: $index()+1"></span> 
        </li>
        <li>
            <input data-bind='value: firstName' placeholder="First name" />
        </li>
        <li>
            <input data-bind='value: lastName' placeholder="Last name" />
        </li>
        <li>
            <li>
                <input data-bind='value: phone' placeholder="Phone" />
            </li>
            <li>
                <input data-bind='value: alt_phone' placeholder="Alt. Phone" />
            </li>
            <li>
               Male <input type="checkbox" data-bind='checked: male' />
            </li>
            <li>
               Female <input type="checkbox" data-bind='checked: female' />
            </li>
            <li><a href="javascript:void(0)" data-bind="click: $parent.removeContact">Remove</a>

            </li>
        </li>
    </ul>
    <!-- /ko -->
</div>
<p>
    <button data-bind='click: addContact'>Add a contact</button>
    <button data-bind='click: save, enable: contacts().length > 0'>Save to JSON</button>
</p>
<textarea data-bind='value: lastSavedJson' rows='5' cols='60' disabled='disabled'></textarea>

CSS

input {
    margin: 2px;
}

JavaScript

var initialData = [{
    firstName: "Jenny",
    lastName: "LaRusso",
    phone: "(555) 121-2121",
    alt_phone: "(555) 123-4567",
    male: false,
    female: true
}, {
    firstName: "Sensei",
    lastName: "Miyagi",
    phone: "(555) 444-2222",
    alt_phone: "(555) 999-1212",
    male: true,
    female: false
}];

var ContactsModel = function (contacts) {
    var self = this;
    self.contacts = ko.observableArray([]);
   
    ko.utils.arrayForEach(contacts, function (contact) {
        self.contacts.push({
            firstName: contact.firstName,
            lastName: contact.lastName,
            phone: contact.phone,
            alt_phone: contact.alt_phone,
            male: ko.observable(contact.male),
            female: ko.observable(contact.female)
        });
    });

    self.addContact = function () {
        self.contacts.push({
            firstName: "",
            lastName: "",
            phone: "",
            alt_phone: "",
            male: false,
            female: false
        });
    };

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

    self.addPhone = function (contact) {
        contact.phones.push({
            number: ""
        });
    };

    self.removePhone = function (phone) {
        $.each(self.contacts(), function () {
            this.phones.remove(phone)
        })
    };

    self.save = function () {
        self.lastSavedJson(JSON.stringify(ko.toJS(self.contacts), null, 2));
    };

    self.lastSavedJson = ko.observable("")
};

ko.applyBindings(new ContactsModel(initialData));