如何使用 KnockoutJS 根据 AJAX 调用的值设置下拉列表?

Question

我正在处理页面的编辑模式。当您单击表格中的铅笔图标时，将显示一个模式窗体。

为了提供上下文，该应用程序是手机维修。我正在管理部分工作。此特定部分是"设备"，您可以在其中添加/编辑设备。

此页面中的多个字段中有一个称为modelId。但modelId存储在其他地方。我必须从单独的 AJAX 调用中获取所有模型。

我的问题是，如何使编辑模式中的下拉列表显示正确的文本，并在下面显示正确的值？

这是我到目前为止的整个视图模型：

// The device page relies on looking up data from other tables...

let DeviceModel = function(deviceId,  clientId, serialNumber, serialNumberTypeId, modelId, serviceProviderId ){
this.deviceId          = ko.observable(deviceId);
this.clientId          = ko.observable(clientId);
this.serialNumber      = ko.observable(serialNumber);                   
this.serialNumberTypeId= ko.observable(serialNumberTypeId);
this.modelId           = ko.observable(modelId);
this.ServiceProviderId = ko.observable(serviceProviderId);
}
/* Bare minimum models to populate drop downs for creating/editing new device */
let SerialNumberType = function(serialNumberTypeId, serialNumberTypeName){
this.serialNumberTypeId   = ko.observable(serialNumberTypeId);
this.serialNumberTypeName = ko.observable(serialNumberTypeName);
}
let Model = function(modelId, modelName){
this.modelId   = ko.observable(modelId);
this.modelName = ko.observable(modelName);
}
let ServiceProvider = function(serviceProviderId, serviceProviderName){
this.serviceProviderId   = ko.observable(serviceProviderId);
this.serviceProviderName = ko.observable(serviceProviderName);
}
let Client = function(clientId, clientLastName){
this.clientId   = ko.observable(clientId);
this.clientLastName = ko.observable(clientLastName);
}


function DeviceViewModel () {
var self = this; // Scope Trick

/* Edit Modal Observables */
self.eDeviceId = ko.observable();
self.eClientId = ko.observable();
self.eSerialNumber =  = ko.observable();
self.eSerialNumberTypeId = ko.observable();
self.eModelId = ko.observable();
self.eServiceProviderId = ko.observable();
/* Add Modal Observables */
self.aDeviceId = ko.observable();
self.aClientId = ko.observable();
self.aSerialNumber =  ko.observable();
self.aSerialNumberTypeId = ko.observable();
self.aModelId = ko.observable();
self.aServiceProviderId = ko.observable();    
/**
* Observable Arrays
*/
self.devices           = ko.observableArray();
// Lookup Table Arrays We Need
self.servceProvider   = ko.observableArray();
self.serialNumberType = ko.observableArray();
self.model            = ko.observableArray();
self.client           = ko.observableArray();
self.init = function () {
$("#wrapper").toggleClass("toggled");
/* GET ALL DEVICES */
$.getJSON(app.deviceUrl,
function (data) {        
$.each(data.data,
function (key, val) {
self.devices.push(new DeviceModel(val.deviceId, val.clientId, val.serialNumbern, val.serialNumberTypeId, val.modelId, val.serviceProviderId ));
});
});

/*------------------------------------*
| GET JSON Data and Populate Arrays  |
*------------------------------------*/
/* CLIENTS */
$.getJSON(app.clientUrl,
function (data) {        
$.each(data.data,
function (key, val) {
self.client.push(new Client(val.clientId, val.clientLastName));
});
});

/* MODELS */
$.getJSON(app.modelUrl,
function (data) {        
$.each(data.data,
function (key, val) {
self.model.push(new Model(val.modelId, val.modelName));
});
});
/* SERIAL NUMBER TYPES */
$.getJSON(app.serialNumberTypeUrl,
function (data) {        
$.each(data.data,
function (key, val) {
self.model.push(new SerialNumberType(val.serialNumberTypeId, val.serialNumberTypeName));
});
});
/* SERVICE PROVIDERS */
$.getJSON(app.serviceProvidersUrl,
function (data) {        
$.each(data.data,
function (key, val) {
self.ServiceProvider.push(new ServiceProvider(val.serviceProviderId, val.serviceProviderName));
});
});
}
/* Edit  */
self.editDevice = function (data, event) {
console.log(data);
/* Show Modal Manually */
$("#editDevice").modal("show");
/* Pre-Populate Text Fields */
self.eDeviceId(data.deviceId);
self.eClientId(data.clientId);
self.eSerialNumber(data.serialNumber);
self.eSerialNumberTypeId(data.serialNumberTypeId);
self.eModelId(data.modelId);
self.eServiceProviderId(data.serviceProviderId);
}
/* Send the Edit Ajax Call to endpoint */
self.updatDevice = function () {
/* Object to Send */
var editObj = {
deviceId: self.eDeviceId(),
clientId: self.eClientId(),
serialNumber: self.eSerialNumber(),
serialNumberTypeId: self.eSerialNumberTypeId(),
modelId: self.eModelId(),
ServiceProviderId: self.eServiceProviderId()  
}
/* Send PUT Ajax Call */ 
sendToEndpoint(app.deviceUrl, 'put', editObj);
}

self.add = function () {
/* Build Object */
var addObj = {
deviceId: "",
clientId: self.aClientId(),
serialNumber: self.aSerialNumber(),
serialNumberTypeId: self.aSerialNumberTypeId(),
modelId: self.aModelId(),
ServiceProviderId: self.aServiceProviderId()  
}
/* Send POST Ajax Call */
sendToEndpoint(app.deviceUrl, 'post', addObj);
}
self.delete = function (customer) {
//sendToEndpoint(OemConfig.oemUrl, 'put', editObj);
}
// Initialize View Model
self.init();
};

ko.applyBindings(new DeviceViewModel());

有人可以帮助我构建正确的下拉列表，比如说模型吗？一旦我看到这一点，我就可以弄清楚其余的。

谢谢你的关注。

John

Answer 1

有一个options绑定。给定一个可观察的数组model，它是一个具有属性modelId和modelName的对象数组，你可以像这样使用它：

<select data-bind="options: model, optionsText: 'modelName', optionsValue: 'modelId'"></select>

您可能还需要一个可观察量来存储所选选项。为此，您将使用选择菜单上的value绑定。