Javascript 将项目名称从组合框设置为淘汰列表
我有一个问题,显示从组合框到淘汰列表的值。 请在下面的图片中选择我从组合框中选择的项目。当我从combobox中选择item时,它会用相同的值更新所有行。 左侧的列表不存储数据库中combobox中的名称,但它存储id。所以combobox和列表与名为Status的列连接。在我的html中,我定义了如下列表,其中ChangeControlName是我要绑定到列表的列表Javascript 将项目名称从组合框设置为淘汰列表,javascript,knockout.js,Javascript,Knockout.js,我有一个问题,显示从组合框到淘汰列表的值。 请在下面的图片中选择我从组合框中选择的项目。当我从combobox中选择item时,它会用相同的值更新所有行。 左侧的列表不存储数据库中combobox中的名称,但它存储id。所以combobox和列表与名为Status的列连接。在我的html中,我定义了如下列表,其中ChangeControlName是我要绑定到列表的列表 <tbody data-bind="foreach: versionDataByProduct"> &l
<tbody data-bind="foreach: versionDataByProduct">
<tr data-bind="click: $root.EditVersionDetail, css: { selected: isSelected}" >
<td data-bind="text: Name "></td>
<td data-bind="text: Code"></td>
<td data-bind ="text: PlatformVersionName"></td>
<td data-bind ="text: ChangeControlName"></td>
</tr>
我已经在html中绑定了我的组合框,如下所示
<td><select id="selModuleType" data-bind="options: $root.modules, optionsCaption: 'Please select Module...' , value: $root.editModuleId , optionsText: 'ModuleName'" /></td>
在上面的代码中,selecteditem包含我们选择的行。正如您在代码中看到的,ChangeControlId是我们从combobox中选择的值的id,它被正确设置为列表。但名称设置不正确。原因是ChangeControlId存储在数据库中。ChangeControlId是显示这些行的表的一部分。ChangeControlName我只想显示。我该怎么办?我还尝试使用computed observable,但它在列表中显示为“object”。我使用了如下计算的可观测值
this.ChangeControlName = ko.computed({
read: function () {
debugger;
return ko.utils.arrayFirst(self.ChangeControls(), function (item) {
if (item.Status() === productVersionId.ChangeControlId()) {
return item.ChangeControl();
}
});
},
write: function (value) {
console.log("Value i get " + value);
return value;
}
});
好了,你的设计让你很难到达你想去的地方
var VersionModel = function () {
var self = this;
self.changeControls = ko.observable([{
name: "Addressed",
value: 1
}, {
name: "Not Addressed",
value: 2
}]);
console.log(self.changeControls()[0].value);
self.versionDataByProduct = [{
Name: "DS",
Code: "sd",
PlatformVersionName: "5.5.3",
ChangeControl: ko.observable(self.changeControls()[0]),
}, {
Name: "EF",
Code: "sd",
PlatformVersionName: "5.5.3",
ChangeControl: ko.observable(self.changeControls()[0])
}];
self.selected = ko.observable(self.versionDataByProduct[0]);
self.EditVersionDetail = function (item) {
self.selected(item);
};
self.editModuleId = ko.observable();
self.modules = [{
editModuleId: 1,
ModuleName: "ABW-BP-Batch Input"
}];
self.editChangeControl = ko.computed({
read: function () {
if (self.selected()) {
console.log('something selected and editChangeControl is changing');
return self.selected().ChangeControl();
}
return '';
},
write: function (value) {
if (value && value != '') {
console.log('writing new value');
self.selected().ChangeControl(value);
}
}
});
}
ko.applyBindings(new VersionModel());
以及html:
<table class="floatLeft">
<thead>
<tr>
<th>Version name</th>
<th>Version Code</th>
<th>Framework version</th>
<th>Change control</th>
</tr>
</thead>
<tbody data-bind="foreach: versionDataByProduct">
<tr data-bind="click: $root.EditVersionDetail, css: { selected: $root.selected() == $data}">
<td data-bind="text: Name "></td>
<td data-bind="text: Code"></td>
<td data-bind="text: PlatformVersionName"></td>
<td data-bind="text: ChangeControl().name,attr:{'data-value':ChangeControl().value}"></td>
</tr>
</tbody>
</table>
<select id="selModuleType" data-bind="options: $root.modules, optionsCaption: 'Please select Module...' , value: $root.editModuleId , optionsText: 'ModuleName'"></select>
<select id="selfChangeControl" data-bind="options: $root.changeControls, optionsCaption: 'Please select Change control...' , value: editChangeControl , optionsText: 'name'"></select>
版本名
版本代码
框架版本
变更控制
这有JSFIDLE或jsbin吗?没有,我没有任何小提琴。但是你明白我的问题吗?我正在努力跟进。是否要将左侧更改控制的更新值保存回db,同时仍在标签中显示描述而不是原始id?我只想显示在combobox中选择的名称。我正确地保存了id。只是我无法将列表中的值正确设置为ComboBox中已选择的值。因此,当选择左侧的项目时,他们会更改右侧的框,仅左侧的一个选定行会更改显示?这是一个完美的示例。你真是大师。希望我能从你身上学到一些东西。你知道有什么更好的方法可以做到这一点吗?你也能在这方面提供帮助。在过去的三天里,我真的很挣扎,这里有一个问题。在加载时的列表中,您已设置为ChangeControl:ko.observable(self.changeControls()[0])。这将始终选择相似的值。假设我的列表已使用不同的值保存。在我们的小提琴示例中,它类似于值1和值2。现在发生的是,假设我的列表预先加载了值1和2,并将列表中的第一个值更改为2,然后尝试选择第一行,然后将其设置回1。你明白我的意思了吗?我用你在屏幕截图中显示的数据加载了它,你会根据你的实际用例加载它。实际上,因为行ChangeControl:ko.observable(self.changeControls()[0]),它加载第一个值。我该怎么办?
var VersionModel = function () {
var self = this;
self.changeControls = ko.observable([{
name: "Addressed",
value: 1
}, {
name: "Not Addressed",
value: 2
}]);
console.log(self.changeControls()[0].value);
self.versionDataByProduct = [{
Name: "DS",
Code: "sd",
PlatformVersionName: "5.5.3",
ChangeControl: ko.observable(self.changeControls()[0]),
}, {
Name: "EF",
Code: "sd",
PlatformVersionName: "5.5.3",
ChangeControl: ko.observable(self.changeControls()[0])
}];
self.selected = ko.observable(self.versionDataByProduct[0]);
self.EditVersionDetail = function (item) {
self.selected(item);
};
self.editModuleId = ko.observable();
self.modules = [{
editModuleId: 1,
ModuleName: "ABW-BP-Batch Input"
}];
self.editChangeControl = ko.computed({
read: function () {
if (self.selected()) {
console.log('something selected and editChangeControl is changing');
return self.selected().ChangeControl();
}
return '';
},
write: function (value) {
if (value && value != '') {
console.log('writing new value');
self.selected().ChangeControl(value);
}
}
});
}
ko.applyBindings(new VersionModel());
<table class="floatLeft">
<thead>
<tr>
<th>Version name</th>
<th>Version Code</th>
<th>Framework version</th>
<th>Change control</th>
</tr>
</thead>
<tbody data-bind="foreach: versionDataByProduct">
<tr data-bind="click: $root.EditVersionDetail, css: { selected: $root.selected() == $data}">
<td data-bind="text: Name "></td>
<td data-bind="text: Code"></td>
<td data-bind="text: PlatformVersionName"></td>
<td data-bind="text: ChangeControl().name,attr:{'data-value':ChangeControl().value}"></td>
</tr>
</tbody>
</table>
<select id="selModuleType" data-bind="options: $root.modules, optionsCaption: 'Please select Module...' , value: $root.editModuleId , optionsText: 'ModuleName'"></select>
<select id="selfChangeControl" data-bind="options: $root.changeControls, optionsCaption: 'Please select Change control...' , value: editChangeControl , optionsText: 'name'"></select>