来自 AJAX 数据的淘汰赛下拉列表答案

【问题标题】：Knockout dropdownlist from AJAX data来自 AJAX 数据的淘汰赛下拉列表
【发布时间】：2014-03-19 21:34:42
【问题描述】：

我正在尝试使用从 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 文档显示了如何使用下拉列表而不是动态数据。

任何帮助将不胜感激。

提前致谢

【问题讨论】：

可以发下ajax回调函数吗？
另外，请将data 对象的样本作为参数发送给构造函数。

标签： jquery ajax asp.net-mvc knockout.js

【解决方案1】：

看起来您正在 ajax 完成后重新创建整个视图模型。你应该更新你的 ajax 完成列表

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

【讨论】：

谢谢。你的权利，但它不仅仅是下拉列表。否则我会同意你的。
我想我当时误解了你的问题。总体评论仍然有效...创建您的视图模型，然后使用您的 ajax 调用对其进行更新。

【解决方案2】：

我已经解决了。

对于其他刚接触淘汰赛的人，我就是这样做的：

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

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

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

【讨论】：

【解决方案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 可观察对象的默认值，也可以像这样向节点添加附加参数：

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

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

【讨论】：