如何使用 KnockoutJS 根据来自 AJAX 调用的值设置下拉菜单？

Question

我正在处理我页面的编辑模式。当您单击我的 table 中的铅笔图标时，会出现一个模式窗体。

该应用程序，为了提供上下文，是单元格 phone 修复。我在管理部分工作。此特定部分是 "DEVICES" 您所在的 adding/editing 台设备。

此页面中的众多字段之一称为 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());

谁能帮我建立正确的下拉菜单，比如模型？一旦我看到了，我就可以弄清楚剩下的了。

感谢您的观看。

约翰

Answer 1

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

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

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

如何使用 KnockoutJS 根据来自 AJAX 调用的值设置下拉菜单？

How do I set dropdown based upon value from AJAX call using KnockoutJS?

javascript

arrays

knockout.js