我正在尝试使用淘汰赛填充基于另一个下拉列表的下拉列表,并且它不会太顺利。整个代码在这里:http://jsfiddle.net/UHQUX/3/,在我的机器上它生成前2个下拉列表,但第二个(应该从操作符填充)从未填写。 这些是两个应该连接的下拉列表:
<td><select data-bind="options: $parent.ColumnNames, value: SearchCriteria(), optionsValue: 'ColumnName', optionsText: 'ColumnDisplayName', optionsCaption: '', attr: { 'id': 'Search_' +Id() + '__ColumnName', name: 'Search[' + Id() + '].ColumnName' }"></select></td>
<td><select data-bind="options: Operators, optionsValue: 'OpId', optionsText: 'OpName'"></select></td>
这是创建新项目的功能:
function SearchCriteriaItem(id, searchCriteria, links, operators) {
var self = this;
self.Id = ko.observable(id);
self.SearchCriteria = ko.observable(searchCriteria);
self.Operators = ko.computed(function() {
if (self.SearchCriteria() !== null) {
var opId;
for (var i = 0; i < links.length; i++) {
if (links[i].ColumnName == self.SearchCriteria()) {
opId = links[i].OpId;
}
}
var ops = [];
for (var j = 0; j < operators.length; j++) {
if (operators[j].OpId == opId) {
op.push(operators[j]);
}
}
return ops;
}
return [];
});
}
这是模型视图:
function SearchCriteriaViewModel() {
var self = this;
var data = [];
var columnNames = [];
data.push({
ColumnName: 'test1',
ColumnDisplayName: 'Test 1',
OpId: '1',
ColumnValuesId: '1'
});
columnNames.push({
ColumnName: 'test1',
ColumnDisplayName: 'Test 1'
});
data.push({
ColumnName: 'test2',
ColumnDisplayName: 'Test 2',
OpId: '2',
ColumnValuesId: '2'
});
columnNames.push({
ColumnName: 'test2',
ColumnDisplayName: 'Test 2'
});
self.Links = data;
self.ColumnNames = columnNames;
var operators = [];
operators.push({
OpId: '1',
OpName: 'Test Op'
});
var searchCriteria = [];
self.AvailableSearchItems = searchCriteria;
self.Search = ko.observableArray();
for (var i = 0; i < self.AvailableSearchItems.length; i++) {
var id = GenerateGuid();
self.Search.push(new SearchCriteriaItem(id, self.AvailableSearchItems[i], self.Links, operators));
}
self.addSearchCriteria = function () {
id = GenerateGuid();
self.Search.push(new SearchCriteriaItem(id, self.AvailableSearchItems[0], self.Links, operators));
};
}
此外,无论我添加多少个搜索条件,ID都始终相同。 id由对控制器的ajax调用生成,该控制器返回新的GUID。返回的值不同,但html显示所有行的相同ID ...
更新:我更新了代码以使其更有意义:http://jsfiddle.net/UHQUX/4/