Search code examples
knockout.jsknockout-mapping-plugin

knockout js `create callback` used with mapping plugin when model's mapping written as a function


I have a working jsfiddle here which is doing exactly what I want so far ie listing a bunch of contacts (using the mapping plugin) and extending each 'contact' with an additional observable isEnabled which is used to control the (enabled/disabled) status of the input boxes displayed in each row.

What I'm having trouble understanding, however, is how to code the contactsMapping as a function. Where I currently have:

var contactsMapping = {
    'contacts': {
        key: function (item) {
            return ko.utils.unwrapObservable(item.id);
        },
        create: function(options) {
           return new contactModel(options.data);
        }
    },
};

I want to use a function (for cleaner access to this etc as described variously):

var contactsMapping = function() {
    var self = this;

    // self.contacts = [what goes here??] 
};

contacts in this model is (educated guess) somehow transcribed by the mapping plugin as an observable array but, how do I inject the key and create functions correctly?

Thanks for any help/pointers...


Solution

  • The mapping functions accept a third parameter which is the object the mapped values are injected into (is extended to). So if you wanted to extend to self, pass it in.

    var contactsMapping = function (data) {
        var mappingOptions = {
            'contacts': {
                key: function (item) {
                    return ko.utils.unwrapObservable(item.id);
                },
                create: function(options) {
                    return new contactModel(options.data);
                }
            },
        };
        ko.mapping.fromJS(data, mappingOptions, this);
    };
    

    fiddle