Knockout mapping issue with arrays

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?

Niko · Accepted Answer · 2012-07-07 21:59:35Z

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/

edited Jul 7, 2012 at 21:59

answered Jul 7, 2012 at 21:41

Niko

26.8k9 gold badges97 silver badges112 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

BonyT Over a year ago

makes no difference with the mapping as shown - it doesn't work as required - see my "answer" above for working code that gets the job done, but is not (imo) ideal

BonyT Over a year ago

Sorry - needed to be clearer - of course the code you've posted works - the issue I'm struggling with is how to customise the mapping to handle an array.

Niko Over a year ago

@BonyT Alright, didn't get that right away. Found another bit and updated my answer - but I'm still not quite sure if that's what you're looking for now.

BonyT Over a year ago

Ah - the two items should have different keys. But thanks - yes that's the missing piece - you hand the mapping code an object containing the array - and set the mapping code to process the Outer Object. Perfect - thanks for that.

BonyT · Accepted Answer · 2012-07-07 21:30:03Z

0

This is doing it by iterating through the array and pushing each item in turn onto the observable collection - is there a better way?

answered Jul 7, 2012 at 21:30

BonyT

11k5 gold badges34 silver badges53 bronze badges

Collectives™ on Stack Overflow

Knockout mapping issue with arrays

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related