下拉菜单未填充 KnockoutJS 和 Ajax

Question

我正在尝试使用来自返回 json 的 ajax 源的 knockoutjs 填充下拉列表。更改另一个下拉列表的值时，必须更新此选择。

这是我的模型：

var self = this,
    getClientsRoute = "GetContactsFromCompany";

self.selectedCompany = ko.observable();
self.contacts = ko.computed(function getContactsFromCompany() {
    var companyId = self.selectedCompany();
    if (companyId != "" && companyId != undefined) {
        return $.ajax(getClientsRoute, {
            type: 'GET',
            data: 'companyId=' + companyId
        });
    } else {
        return [];
    }             
});

这是我的 HTML：

<select class="form-control" name="Client.Id" data-bind="options: contacts,optionsText: 'Name',optionsValue: 'Id'">
</select>

这是我返回 JSON 字符串的方法（我正在使用 .NET MVC）：

public JsonResult GetContactsFromCompany(int companyId)
    {
        var contacts = _db.Contacts.Where(c => c.CompanyId == companyId).Select(c =>
            new
            {
                Id = c.Id.ToString(),
                Name = c.Name.ToString()
            }).ToList();

        return Json(contacts, JsonRequestBehavior.AllowGet);
    }

我已经看到了其他解决方案，但我认为使用“计算”​​方法更干净。一切似乎都正常，我收到了我的 json 数据，但没有填充下拉列表。我已经复制了服务器返回的json字符串并用它创建了一个observableArray，并且运行良好，那么为什么从服务器获取数据时它不起作用？

感谢您的帮助。

Answer 1

$.ajax的返回值不是ajax调用的结果。您需要提供一个success 处理程序，该处理程序将在 AJAX 调用完成后接收数据（ajax 调用是异步的）。你想要做的是为你的contacts 提供一个单独的 observable，然后连接到companyId 的订阅，并在companyId 发生变化时进行 ajax 调用：

self.companyId = ko.observable();
self.contacts = ko.observableArray([]);
self.companyId.subscribe(function() { self.loadContacts(); });

self.loadContacts = function() {
    $.ajax(getClientsRoute, {
        type: 'GET',
        data: 'companyId=' + self.companyId(),
        success: function(data) { self.contacts(data); }
    });
}