KnockoutJS best practice to populate multiple view models using Ajax

Question

I was wondering whether anyone had any recommendations regarding populating multiple view models on a screen. I have:

a) a view model that has a list of tasks

b) a view model that has a list of users

I populate these in the 2 x ajax success (separate ajax calls) something like:

success: function (data) {
    masterVM.User = ko.mapping.fromJS(data, mapping);
    ko.applyBindings(masterVM); 
}

/* another ajax call: */
success: function (data) {
    masterVM.Task = ko.mapping.fromJS(data, mapping);
    ko.applyBindings(masterVM); 
}

And currently calling in each ajax success call.

I hope my question is clear and concise. Please ask for further detail if required.

Regards Phil

score 4 · Accepted Answer · edited May 23 '17 at 12:20

We currently handle this by sending all of the data to our page in a single Ajax call, then applying a ko.mapping to map the data to the view models on our main view model.

We began by making two calls just as you are but decided that it would be better to reduce the number of http requests being made, which is why we combined the data sets into a single hierarchical object structure, and it's working great.

This question and the subsequent answer contain a snippet of the approach we're taking: Map JSON data to Knockout observableArray with specific view model type

score 3 · Answer 2 · answered Apr 01 '12 at 17:17

3

As long as you dont notice a performance issue, I recommend making separate calls because this will keep your services loosely coupled with your presentation needs.

However, if its a perf issue, you can make your web service aggregate the data and return it in one shot. But you lose a little maintainability by this.

answered Apr 01 '12 at 17:17

John Papa

21,880
4
61
60

1

I agree with you that modularizing your services is a good thing. We do so as well. However, we also create composite services which call the modular services which then bundle the multiple service results together, resulting in an object that can be returned in a single call and is also appropriately scoped for the consumer (the view in this case). See here: http://soapatterns.org/ – KodeKreachor Apr 01 '12 at 22:14
Our approach also ensures a very high level of maintainability as well as adhering to the single responsibility principle. – KodeKreachor Apr 01 '12 at 22:15
I agree that making a "composite" web service (or what I call an aggregated web service) works just fine. Its not a bad solution, I've done it myself. But I often dont add the extra service unless I see a need. Usually due to performance issues or because I will reuse it. I'm just laying out the pros and cons for Phil – John Papa Apr 01 '12 at 22:17
Fair enough John, very respectfully though, if I can reduce the number of http requests my page needs to make each time it's hit by half then that's more than reason enough for me to create the composite. It'll pay for itself in no time ;) – KodeKreachor Apr 02 '12 at 00:43

KnockoutJS best practice to populate multiple view models using Ajax

2 Answers2