knockout.js 我如何使用KnockoutJS根据 AJAX 调用的值设置下拉菜单?

1yjd4xko  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(184)

我正在编辑页面的模式。当您单击表格中的铅笔图标时,会出现一个模式表单。
这个应用程序,给予上下文,是手机维修。我正在管理部分工作。这个特定的部分是“设备”,你在那里添加/编辑设备。
在这个页面中,有一个字段叫做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());

有人能帮我构建正确的下拉列表吗,比如说,模型?一旦我看到了,我就能弄清楚剩下的。
谢谢你来看我
若翰

rqmkfv5c

rqmkfv5c1#

这里有一个options绑定。给定一个可观察的数组model,它是一个具有属性modelIdmodelName的对象数组,你可以这样使用它:

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

您可能还需要一个可观察对象来存储所选的选项,为此,您可以在选择菜单上使用value绑定。

相关问题