我正在编辑页面的模式。当您单击表格中的铅笔图标时,会出现一个模式表单。
这个应用程序,给予上下文,是手机维修。我正在管理部分工作。这个特定的部分是“设备”,你在那里添加/编辑设备。
在这个页面中,有一个字段叫做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());
有人能帮我构建正确的下拉列表吗,比如说,模型?一旦我看到了,我就能弄清楚剩下的。
谢谢你来看我
若翰
1条答案
按热度按时间rqmkfv5c1#
这里有一个
options
绑定。给定一个可观察的数组model
,它是一个具有属性modelId
和modelName
的对象数组,你可以这样使用它:您可能还需要一个可观察对象来存储所选的选项,为此,您可以在选择菜单上使用
value
绑定。