Question

Fiddle here

I have an array of objects that I want to map directly into a collection on my viewmodel, but I want to customise the mapping. The code doesn’t work though unless there is only one item in the data.UserReports collection.

I can do it if I add another layer into the object graph – so for instance instead of mapping data.UserReports to model.UserReports – if I had a property on the model called Foo – I could map data to foo and then access the collection via model.Foo.UserReports, but this is undesirable and messy.

I also reckon I can do it if i iterate through the data.UserReports array, and push each UserReport in turn onto the model’s collection – but again this seems clumsy.

So what’s wrong with the fiddle?

Answer 1

The code in that fiddle is not working at all, at least not for me. But however, here is how you would normally use the mapping plugin with an existing view model instance:

function PageModel() { /* ... */ }

$(document).ready(function() {
    var model = new PageModel();

    // Don't replace some observable, but extend the view model automatically,
    // creating an observable for each property in "data".
    ko.mapping.fromJS(data, userReportMapping, model);

    ko.applyBindings(model);
}​);​

http://jsfiddle.net/Quu4f/27/

---

Update: You also need to / should specify to which key in the data object the mapping options should be applied:

var userReportMapping = {
   'UserReports': {
        key: function(data) {
            return ko.utils.unwrapObservable(data.Id);
        },
        create: function(options) {
            return new userReportModel(options.data);
        }
    }
};

It is however a bit weird that you get an error when you have two items with the same ID in the data set. It seems as if the “create” callback is not executed for the duplicate, but a normal observable is still created.

http://jsfiddle.net/Quu4f/29/