为 knockout.js 数据绑定加载多个远程数据源

Question

我正在开发 knockout.js 向导，需要从多个远程数据源（通过 AJAX）获取数据，然后才能在向导中正确呈现下拉菜单。

此外，还有 4 个下拉菜单，#1 和 #2 可以先加载，#3 和 #4 取决于前两个选择的选项。

到目前为止，我已经尝试使用 jQuery promises 以及嵌套数据调用及其关联的回调，但是有没有更好的方法来为向导构建我的视图模型代码？

下面是一些数据加载代码。如果需要，我很乐意提供更多。

var postobj = {
    id: workoutId
};
var getWorkout = $.post("./RowingWorkouts/GetWorkoutUsingId", postobj);
var getDiet = $.post("./Diet/GetDietUsingId", postobj);
var getFeedback = $.post("./RowingWorkouts/GetWorkoutFeedback", postobj);
// When all three are successful - I haven't gotten the when syntax to actually work yet
$.when(getWorkout, getDiet, getFeedback).done(function (workout, diet, feedback) {
    //each of the parameter is an array
    renderCharts(workout[0], diet[0], feedback[0])
    // Here are more dropdowns that depend on the choices from the above ones
    self.suggestedWorkouts = ko.observableArray();
    // pseudo-code for data call for getting suggested workouts
    $.post("./RowingWorkouts/GetSuggested", { id: selectedOldWorkout }, function(result) { 
        self.suggestedWorkouts(result);
    });

});

这更深入了几个层次，如果可能的话，我宁愿避免它。是否有任何我遗漏的设计模式，或者这个明文编码有误？

Answer 1

您可以使用 lazy loading observable 将数据获取到您的 viewModel 可观察对象中，并计算订阅父级可观察对象的负载。

function ViewModel() {
   this.workout = ko.onDemandObservable(ViewModel.prototype.getWorkout, this);
   this.diet = ko.onDemandObservable(ViewModel.prototype.getDiet, this);
   this.feedback= ko.onDemandObservable(ViewModel.prototype.getFeedback, this);
   this.suggestedWorkouts = ko.observable();

   ko.computed(ViewModel.prototype.listsLoaded, this);
}

ViewModel.prototype.listsLoaded= function () {    
   if (this.workout.loaded() && this.diet.loaded() && this.feedback.loaded()) {
        this.loadSuggestedWorkouts();
   }
}

ViewModel.prototype.getWorkout = function () {
   ...
}

ViewModel.prototype.getDiet = function () {
   ...
}

ViewModel.prototype.getFeedback = function () {
   ...
}

ViewModel.prototype.loadSuggestedWorkouts = function () {
  ...
}

为 knockout.js 数据绑定加载多个远程数据源

Load up multiple remote data sources for knockout.js data binding

javascript

ajax

viewmodel

knockout.js