Use Mapping for Knockout.js Contacts Editor Example

Question

I'm looking at this example: http://knockoutjs.com/examples/contactsEditor.html

I need to get the same example working with mapping plugin

I am using something similar but with more complex arrays, nested 6 levels deep. I'm pretty sure if I had this example but with the mapping plugin, I would be okay.

---

For the following I am guessing it's something along the lines of:

var initialData = [
    { firstName: "Danny", lastName: "LaRusso", phones: [
        { type: "Mobile", number: "[phone]" },
        { type: "Home", number: "[phone]"}]
    },
    { firstName: "Sensei", lastName: "Miyagi", phones: [
        { type: "Mobile", number: "[phone]" },
        { type: "Home", number: "[phone]"}]
    }
];

var ContactsModel = function(contacts) {
    var self = this;

// I'M TOTALLY LOST AT THIS POINT !?!? //

    self.contacts = ko.mapping(contacts, function(contact) {

        return { firstName: contact.firstName, lastName: contact.lastName, phones: ko.observableArray(contact.phones) };
    });

    self.addContact = function() {
        self.contacts.push({
            firstName: "",
            lastName: "",
            phones: ko.observableArray()
        });
    };

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

    self.addPhone = function(contact) {
        contact.phones.push({
            type: "",
            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));

Answer 1

Try:

self.contacts = ko.mapping.fromJS(contacts);

You need to use the methods on the mapping plugin, rather than just calling the plugin itself.