Knockout.js knockout js：初始化嵌套在observableArray中的下拉列表的值

我已经在其他地方看到了一些解决这个问题的方法，但还没有找到如何在我的具体情况下实现这一点

observableArray填充html列表。在列表中，用户可以编辑特定行的一个值。行中要编辑的项本身是一个observableArray，用于填充下拉列表。单击行上的编辑按钮（下面的代码中未显示编辑按钮）时，通过ajax调用填充下拉列表的数组

除了一个重要的问题外，所有这些都可以正常工作：到目前为止，下拉列表中的值还没有预先填充

下面是一个真实代码正在做的大体模型

如果我在html中调用

selectedTeamType

作为

selectedTeamType（）

，则初始值已填充，但未注册对选择框的进一步更改。如果我像调用

selectedTeamType

一样调用

selectedTeamType

，则初始值设置不正确，但会注册对选择框的进一步更改

HTML

---

}))

你有没有尝试过改变你的构造器来接受你喜欢的构造器

my.TeamTypesModel = function (data) {
        var self = this;
        self.TeamTypeID = ko.observable(data.TeamTypeId);
        self.TeamTypeText = ko.observable(data.TeamTypeText);
    };

---

你试过改变你的构造器来接受d吗

my.TeamTypesModel = function (data) {
        var self = this;
        self.TeamTypeID = ko.observable(data.TeamTypeId);
        self.TeamTypeText = ko.observable(data.TeamTypeText);
    };

---

在填充

my.TeamViewModel.TeamTypes

数组之前是否设置了

selectedTeamType

？如果是这样的话，这可能就是为什么没有设置其初始值。我在你发布的javascript中没有看到你设置

selectedTeamType

初始值的地方

更新

你对自己问题的回答证实了我的上述怀疑。每次用户编辑团队时，是否都需要加载“团队类型”下拉列表？如果每个团队的选择选项都相同，为什么不加载一次呢

例如：

my.TeamViewModel.load_Teams();
my.TeamViewModel.load_TeamTypes();
ko.applyBindings(my.TeamViewModel);

这样，当用户单击编辑按钮时，选项列表应该已经加载。如果列表中的每个团队都不需要新的团队类型选项列表，那么它也可以为您的客户机/服务器省下一些汗水

如果您想保证

$.ajax

调用在您做任何事情之前都会完成，我建议您研究jQuery的

$.Deferred

方法和promise API。如果有多个

$.ajax

调用，并且只有在两个调用都成功后才需要执行操作，则可以执行以下操作：

var defer_Teams = $.Deferred();
var defer_TeamTypes = $.Deferred();
$.ajax({ // initiate the server call to get teams
    url: '/teams',
    success: function(data) {
        defer_Teams.resolve(data); // tell the promise API this is ready
    }
});
$.ajax({ // initiate the server call to get team types
    url: '/team-types',
    success: function(data) {
        defer_TeamTypes.resolve(data); // tell the promise API this is ready
    }
});

$.when(defer_Teams, defer_TeamTypes).then(function(teamData, teamTypeData) {

    $.each(teamTypeData, function(i, d) {
        // populate team types array
        // could also do this with ko.mapping instead of $.each
    })

    $.each(teamData, function(i, d) {
        // populate teams array
        // could also do this with ko.mapping instead of $.each
    })

});

---

假设您的/团队呼叫返回速度快，但您的/团队类型呼叫滞后。使用上述方法，在两个调用完成之前，不会填充teams数组。在用户单击编辑按钮并预填充所选值之前，确实需要完成类型调用。

是否在填充

my.TeamViewModel.TeamTypes

数组之前设置

selectedTeamType

？如果是这样的话，这可能就是为什么没有设置其初始值。我在你发布的javascript中没有看到你设置

selectedTeamType

初始值的地方

更新

你对自己问题的回答证实了我的上述怀疑。每次用户编辑团队时，是否都需要加载“团队类型”下拉列表？如果每个团队的选择选项都相同，为什么不加载一次呢

例如：

my.TeamViewModel.load_Teams();
my.TeamViewModel.load_TeamTypes();
ko.applyBindings(my.TeamViewModel);

这样，当用户单击编辑按钮时，选项列表应该已经加载。如果列表中的每个团队都不需要新的团队类型选项列表，那么它也可以为您的客户机/服务器省下一些汗水

如果您想保证

$.ajax

调用在您做任何事情之前都会完成，我建议您研究jQuery的

$.Deferred

方法和promise API。如果有多个

$.ajax

调用，并且只有在两个调用都成功后才需要执行操作，则可以执行以下操作：

var defer_Teams = $.Deferred();
var defer_TeamTypes = $.Deferred();
$.ajax({ // initiate the server call to get teams
    url: '/teams',
    success: function(data) {
        defer_Teams.resolve(data); // tell the promise API this is ready
    }
});
$.ajax({ // initiate the server call to get team types
    url: '/team-types',
    success: function(data) {
        defer_TeamTypes.resolve(data); // tell the promise API this is ready
    }
});

$.when(defer_Teams, defer_TeamTypes).then(function(teamData, teamTypeData) {

    $.each(teamTypeData, function(i, d) {
        // populate team types array
        // could also do this with ko.mapping instead of $.each
    })

    $.each(teamData, function(i, d) {
        // populate teams array
        // could also do this with ko.mapping instead of $.each
    })

});

---

假设您的/团队呼叫返回速度快，但您的/团队类型呼叫滞后。使用上述方法，在两个调用完成之前，不会填充teams数组。在用户单击编辑按钮并预填充选定值之前，确实需要完成类型调用。

明显的修复包括两个步骤：

首先，在

Edit

功能中传递对当前项目及其当前

TeamType

的引用

self.Edit=函数（）{
var=这个；
var_TeamType=self.TeamTypeID（）；
my.TeamViewModel.load\u TeamTypes（即，\u TeamType）；
};

然后，最重要的是，将这些引用传递给加载TeamType的函数， 并且**在TeamTypes数组加载后设置selectedTeamType；在这种情况下，在jQuery的

ajax

的

complete

函数中设置selectedTeamType

load\u TeamType=函数（即，\u TeamType）{
$.ajax({
//为了简洁起见，此处仅显示部分ajax调用。。。
$。每个（数据、函数（i、d）{
TeamTypes.push（新的my.TeamTypesModel（）
.TeamTypeID（d.TeamTypeID）
.TeamTypeText（d.TeamTypeText）
);
});
//……阿贾克斯继续说
完成：函数（）{
即.selectedTeamType（\u TeamType）；
}
});
},

表面修复涉及两个步骤：

首先，在

Edit

功能中传递对当前项目及其当前

TeamType

的引用

self.Edit=函数（）{
var=这个；
var_TeamType=self.TeamTypeID（）；
my.TeamViewModel.load\u TeamTypes（即，\u TeamType）；
};

然后，最重要的是，将这些引用传递给加载TeamType的函数， 并且**在TeamTypes数组加载后设置selectedTeamType；在这种情况下