Currently, I am working on an application that involves making AJAX calls to load JSON data and bind it using KnockoutJS. However, I noticed a problem where some of the select elements were not being populated with options after certain AJAX calls. To address this issue, I implemented callback functions, but I can't help feeling like there might be a more elegant solution out there that I'm missing. Here is how my current viewmodel implementation looks like:
activate = () => {
this.refreshMonths(() => {
this.refreshDays(() => {
this.refreshYears(() => {
this.refreshHeightFeet(() => {
this.refreshHeightInches();
});
});
});
});
this.isActivated = true;
}
refreshMonths(callback: () => any) {
this._propertyDataValueService.getMonths().done(entities => {
this.months(entities);
callback();
});
}
refreshDays(callback: () => any) {
this._propertyDataValueService.getDays().done(entities => {
this.days(entities);
callback();
});
}
refreshYears(callback: () => any) {
this._propertyDataValueService.getYears().done(entities => {
this.years(entities);
callback();
});
}
refreshHeightFeet(callback: () => any) {
this._propertyDataValueService.getFeet().done(entities => {
this.feet(entities);
callback();
});
}
refreshHeightInches() {
this._propertyDataValueService.getInches().done(entities => {
this.inches(entities);
});
}
Additionally, here is what my service code looks like:
export class PropertyDataValuesSerivce {
private _baseUrl = '/Data/';
getMonths(): Q.Promise<Array<Models.SelectListModel>> {
return Q($.getJSON(this._baseUrl + 'GetMonths'));
}
getDays(): Q.Promise<Array<Models.SelectListModel>> {
return Q($.getJSON(this._baseUrl + 'GetDays'));
}
getYears(): Q.Promise<Array<Models.SelectListModel>> {
return Q($.getJSON(this._baseUrl + 'GetYears'));
}
getFeet(): Q.Promise<Array<Models.SelectListModel>> {
return Q($.getJSON(this._baseUrl + 'GetFeet'));
}
getInches(): Q.Promise<Array<Models.SelectListModel>> {
return Q($.getJSON(this._baseUrl + 'GetInches'));
}
}