淘汰:加载时使用Ajax加载可观察数组

我在将所选选项绑定回下拉列表时遇到问题

这是我的代码:

@Html.SelectListFor(m => m.State,
new { data_bind = "options: availableStates,  optionsText: 'Name', 
                   optionsValue: 'Id', selectedOptions: selectedStates
    })

在我的页面加载中,我想在此下拉列表中设置选项,以便获得以下淘汰代码:

 $.ajax({
            url: rootDir + "/Home/GetStates",
            type: "GET",                
            contentType: "application/json",
            success: function (data) {
                var jsonResult1 = JSON.parse(data);                    
                data1 = jsonResult1;
                for (key in jsonResult1) {
                    var item = {
                        Id: jsonResult1[key].Id,
                        Name: jsonResult1[key].Name
                    };
                    self.availableStates.push(item);
                }
            }
       });

  self.selectedStates = ko.observableArray(vmData.State || "");
  //vmData.State has the previous selected values from the db 

我的问题是,当我调试上面的代码时,上面的Ajax调用最后执行,selectedStates语句之前执行。因为Ajax调用是在随后执行的,所以下拉列表是空的,并且下拉列表中没有要设置的内容。

我可以直接把上面的Ajax代码放在我的knockout JS文件中,并加载availableStatesObservable数组吗?