Question

我正在尝试使用从AJAX调用中获取的数据填充下拉列表。

我是Knockout的新手，无法弄清楚它是如何接受动态数据数组的。

HTML如下：

<select data-bind="options: jobTitles, optionsText: 'name', optionsValue: 'id' value: selectedItem"></select>

该脚本在AJAX成功时被调用：

function UserViewModel(data) {
    this.firstName = ko.observable(data.FirstName);
    this.surname = ko.observable(data.Surname);

    JobTitlesList: ko.observableArray([]);

    $.each(data.TitlesList, function(index, value) {
        JobTitlesList.push(value)
    });

    jobTitles : ko.observableArray(JobTitlesList[])
}

Knockout文档显示了如何执行下拉列表但不包含动态数据。

非常感谢任何帮助。

提前致谢

Answer 1

在ajax完成后，您似乎正在重新创建整个视图模型。您应该使用

更新ajax完成时的列表

function UpdateDropDown(data) {
    $.each(data.TitlesList, function(index, value) {
        JobTitlesList.push(value)
    });
}

Answer 2

我已经解决了。

对于其他新人来说，这就是我的表现：

this.jobTitlesList = ko.observableArray(data.TitlesList);

this.jobTitles = this.jobTitlesList;
this.selectedItem = 213;

其中data.TitlesList是从服务器返回的数组。

Answer 3

您的功能应如下所示：

function UserViewModel(data) {
    this.firstName = ko.observable(data.FirstName);
    this.surname = ko.observable(data.Surname);
    this.selectedItem = ko.observable();

    this.jobTitles = ko.observableArray([]);
    var mappedjobTitles = $.map(data.TitlesList, function (item) {
                        return new JobTitle(item)
                    });

    this.jobTitles(mappedjobTitles);
}

您可以定义selectedItem observable的默认值，或者您可以向节点添加其他参数，如下所示：

<select data-bind="options: jobTitles, optionsText: 'name', optionsValue: 'id' value: selectedItem" optionsCaption: "Select a job title..."></select>

确保TitlesList包含具有属性“name”和“id”的对象数组;如果TitlesList只是一个字符串数组，那么应该摆脱它 optionsText和optionsValue参数。

来自AJAX数据的Knockout下拉列表

3 个答案: