我已经在其他地方看到了这个问题的一些解决方案,但还没有找到如何在我的具体情况下完成这项工作。
observableArray 填充一个 html 列表。在列表中,用户可以编辑特定行的值之一。行中要编辑的项目本身就是一个填充下拉列表的 observableArray。当单击行上的编辑按钮时,下拉列表的数组通过 ajax 调用填充(编辑按钮未在下面的代码中显示)。
除了一个重要问题外,我的一切工作正常:到目前为止,下拉列表中的值尚未预先填充。
下面是真实代码在做什么的粗略模型。
如果我在 html 中调用,则填充初始值selectedTeamType
,但未注册对选择框的进一步更改。如果我调用as just ,则初始值设置不正确,但会注册对选择框的进一步更改。selectedTeamType()
selectedTeamType
selectedTeamType
HTML
<table>
<tr> <!-- ko foreach: my.TeamViewModel.Teams -->
<td data-bind="text: TeamID"></td>
<td data-bind="text: TeamText"></td>
<td> <!-- the TeamType will be editable, so we provide a dropdown list, but default to the current value -->
<select data-bind="options: my.TeamViewModel.TeamTypes,
optionsText: 'TeamTypeText',
optionsValue: 'TeamTypeID',
value: selectedTeamType"></select>
</td>
</tr> <!-- /ko -->
</table>
JAVASCRIPT
var my = my || {};
$(function () {
my.TeamModel = function () {
var self = this;
self.TeamID = ko.observable();
self.TeamText = ko.observable();
self.TeamTypeID = ko.observable();
self.selectedTeam = ko.observable();
self.Edit = function () {
my.TeamViewModel.load_TeamTypes();
};
};
my.TeamTypesModel = function () {
var self = this;
self.TeamTypeID = ko.observable();
self.TeamTypeText = ko.observable();
};
my.TeamViewModel = function () {
var Teams = ko.observableArray([]),
TeamTypes = ko.observableArray([]),
load_TeamTypes = function () {
$.ajax({
// only part of ajax call displayed here for sake of brevity...
$.each(data, function (i, d) {
TeamTypes.push(new my.TeamTypesModel()
.TeamTypeID(d.TeamTypeID)
.TeamTypeText(d.TeamTypeText)
);
});
});
},
load_Teams = function () {
$.ajax({
// only part of ajax call displayed here for sake of brevity...
$.each(data, function (i, d) {
Teams.push(new my.TeamModel()
.TeamID(d.TeamID)
.TeamText(d.TeamText)
);
});
}
});
};
return {
Teams: Teams,
TeamTypes: TeamTypes,
load_TeamTypes: load_TeamTypes
};
} ();
my.TeamViewModel.load_Teams();
ko.applyBindings(my.TeamViewModel);
});