Currently, I am developing a knockout.js wizard that requires fetching data from multiple remote sources using AJAX in order to properly display dropdown menus within the wizard.
There are 4 dropdowns in total and while the first two can be loaded initially, the last two depend on the selections made in the initial dropdowns.
So far, I have tried using jQuery promises and nesting data calls with their callbacks. However, I am open to suggestions on better ways to structure the view model code for the wizard.
Below is a snippet of the data loading code. Feel free to request more information if needed.
var postobj = {
id: workoutId
};
var getWorkout = $.post("./RowingWorkouts/GetWorkoutUsingId", postobj);
var getDiet = $.post("./Diet/GetDietUsingId", postobj);
var getFeedback = $.post("./RowingWorkouts/GetWorkoutFeedback", postobj);
$.when(getWorkout, getDiet, getFeedback).done(function (workout, diet, feedback) {
renderCharts(workout[0], diet[0], feedback[0])
self.suggestedWorkouts = ko.observableArray();
$.post("./RowingWorkouts/GetSuggested", { id: selectedOldWorkout }, function(result) {
self.suggestedWorkouts(result);
});
});
This process involves multiple levels of complexity, which I would like to simplify if possible. Are there any overlooked design patterns or mistakes in my coding approach?