[英]Set item name from combobox to knockout list
我有一個問題,從組合框到淘汰賽列表顯示價值。 請在我從組合框中選擇項目的下方顯示圖像。 當我從組合框中選擇項目時,它將更新具有相同值的所有行。
左側的列表未在數據庫中存儲組合框的名稱,但存儲了ID。 因此,組合框和列表與狀態欄相連。 在我的HTML中,我定義了以下列表,其中ChangeControlName是我要綁定到列表的列表
<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>
combox在我的viewmodel中加載如下
// Load Change Control List
function loadChangeControlList() {
$.ajax({
url: "../RestService/Product/ChangeControlList",
type: "PUT",
contentType: 'application/json',
processData: false,
error: function (XMLHttpRequest, textStatus, errorThrown) {
},
success: function (allData) {
var mappedChangeControls = $.map(allData, function (item) {
return new changeControlList(item);
});
self.ChangeControls(mappedChangeControls);
}
});
}
我已經將我的組合框綁定到html中,如下所示
<td><select id="selModuleType" data-bind="options: $root.modules, optionsCaption: 'Please select Module...' , value: $root.editModuleId , optionsText: 'ModuleName'" /></td>
當我選擇上圖所示的左側行時,我被選中。 在值editModuleId的訂閱事件中,我嘗試將值分配給選定的行,如下所示。
self.editChangeControl.subscribe(function (value) {
if (!value) {
return;
}
self.selecteditem().ChangeControlId(value.Status());
self.selecteditem().ChangeControlName(value.ChangeControl());
});
在上面的代碼中,selecteditem包含我們選擇的行。 正如您在代碼中上面看到的那樣,ChangeControlId是我們從組合框中選擇的值的ID,並且已正確設置為列表。 但是名稱設置不正確。 原因是ChangeControlId存儲在數據庫中。 ChangeControlId是顯示這些行的表的一部分。 我想要ChangeControlName僅用於顯示目的。 我該怎么辦? 我也嘗試過使用可計算的可觀察值,但它在列表中顯示為“對象對象”。 我使用了如下所示的可計算觀察值
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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.