knockout set selectedItem to null

Question

I have got the this view model:

var contactsViewModel = {
      contacts: ko.mapping.fromJS([])                                
};

It gets populated like this:

ko.mapping.fromJS(contactsData, dataMappingOptions, contactsViewModel.contacts);    
ko.applyBindings(contactsViewModel);

The mapping comes from a contactItem model

var dataMappingOptions = {
     key: function (data) {
        return data.id;
     },
     create: function (options) {
         return new contactItem(options.data);
    }
};

Now I have a selectedItem method which I add to the view model:

contactsViewModel.selectedItem = ko.observable();

So I can add, remove, edit etc. But for cancelling when I call:

contactsViewModel.cancel = function () {
    contactsViewModel.selectedItem(null);
    console.log(contactsViewModel.selectedItem());
};

I get null in the console but the item i was editing shows my latest change!!? :(

More snippets in case you wish to see:

var contactItem = function (data) {
     var self = this;
     self.id = ko.observable(data.id);
     self.email = ko.observable(data.email);
     self.firstName = ko.observable(data.firstName);
     self.lastName = ko.observable(data.lastName);
     self.company = ko.observable(data.company);              
     self.reportsURL = ko.computed(function () {
          return "#/reports/contact/" + self.id;
     });
     // validations:
    ko.validation.configure({
          insertMessages : false
    });
    self.email.extend({
          required: true,
          email: true
    });
    self.firstName.extend({ required: true });
    self.lastName.extend({ required: true });
    self.company.extend({ required: true });
    self.errors = ko.validation.group(self);
};

and my edit method:

contactsViewModel.edit = function (contact) {
    contactsViewModel.selectedItem(contact);
};

and the template that has this cancel on it:

<script type="text/html" id="edit">
        <td class="editMode">
            <input class="span3 animated fadeInDown" data-bind="value: email, validationAlert : email " />
        </td>
        <td class="editMode">
            <input class="span2 animated fadeInDown" data-bind="value: firstName, validationAlert : firstName " />
        </td>
        <td class="editMode">
            <input class="span2 animated fadeInDown" data-bind="value: lastName, validationAlert : lastName " />
        </td>
        <td class="editMode">
            <input class="span2 animated fadeInDown" data-bind="value: company, validationAlert : company " />
        </td>
        <td class="editMode">
            <ul class="rowOptions">
                <li><a href="#" data-bind="click: $parent.save" title="Save your edits">Save<i class="icon-ok"></i></a></li>
                <li><a href="#" data-bind="click: $parent.cancel" title="Cancel editing">Cancel<i class="icon-remove-circle"></i></a></li>
            </ul>
        </td>
</script>

Answer 1

When you set selectedItem, you are setting it to a reference to your object. So, when you make edits, they are being made to the actual object.

• One option is to make a copy/clone of your object to edit, then replace it.

• Another option is to keep track of the original data (before being mapped) and on a cancel use it to re-create the original.

• Otherwise, you could use a technique like this: http://www.knockmeout.net/2011/03/guard-your-model-accept-or-cancel-edits.html to accept/cancel edits to individual observables.