第二个级联下拉淘汰赛没有设置返回值

Question

我在使用 Knockout 时遇到下拉列表问题。我对此很陌生。场景是，当我编辑一些数据时，我调用一个Web Api to return JSON中的一些信息。然后 JSON 被映射并显示给最终用户，如果他们愿意，可以进行编辑。我有两个下拉列表（制造商和范围）。制造商下拉列表被填充并设置为 returned 的正确值。问题是第二个下拉列表被填充但 not 被设置为正确的值。相反，它保持默认的 "select" 值。有人能解释为什么会发生这种情况或为我指明正确的方向吗？

我的代码如下。我已经对其进行了缩减，但如果需要可以提供任何进一步的代码。非常感谢。

JS

/// <reference path="../knockout/knockout-3.4.0.debug.js" />
/// <reference path="../jquery/jquery.min.js" />

var deal = function () {
var self = this;
// These are the initial options
self.ManufacturerOptions = ko.observableArray();
self.VehicleManufacturerId = ko.observable();
self.RangeOptions = ko.observableArray();
self.VehicleRangeId = ko.observable();

var Deals = {
    ManufacturerOptions: self.ManufacturerOptions,
    VehicleManufacturerId: self.VehicleManufacturerId,
    RangeOptions: self.RangeOptions,
    VehicleRangeId: self.VehicleRangeId,
};

self.Deal = ko.observable();
self.Deals = ko.observableArray();
RetrieveDeals();
GetManufacturers();

self.EditData = function (Deal) {
    GetManufacturers();
    GetRanges(Deal.VehicleManufacturerId);
    self.Deal(Deal);
};

function GetManufacturers() {
    $.ajax({
        url: 'http://localhost:47633/api/Vehicle/GetManufacturers',
        type: 'get',
        crossDomain: true,
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (dataReturned) {
            self.ManufacturerOptions(dataReturned);
        }
    });
}

function GetRanges(manufacturerId) {
    $.ajax({
        url: 'http://localhost:47633/api/Vehicle/GetRanges?manufacturerCode=' + manufacturerId,
        type: 'get',
        crossDomain: true,
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        success: function (dataReturned) {
            self.RangeOptions(dataReturned);
        }
    });
}
};

$(document).ready(function () {
    ko.applyBindings(new deal());
});

ASCX 控件

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Home.ascx.cs" Inherits="Desktop.Controls.DealBook.Home" %>

<h1>DealBook</h1>
<div data-bind="if: Deal">
<div>
    <h2>Update Deal</h2>
</div>
<div>
    <p>Manufacturer: <select id="Manufacturer" data-bind="options: ManufacturerOptions, optionsCaption: 'Select Manufacturer', optionsValue: 'cman_code', optionsText: 'cman_name', value: Deal().VehicleManufacturerId, event: { change: manufacturerChanged}"></select></p>
    <p>Range: <select id="Range" data-bind="options: RangeOptions, optionsCaption: 'Select Range', optionsValue: 'cran_code', optionsText: 'cran_name', value: Deal().VehicleRangeId, event: { change: rangeChanged }"></select></p>
</div>
<input type="button" id="btnUpdateData" class="btn btn-primary" value="Update Deal" data-bind="click: UpdateData" />
<input type="button" id="btnCancel" class="btn btn-primary" value="Cancel" data-bind="click: Cancel" />

更新我认为问题是我的代码试图在选项从 Web returned API 之前将下拉列表更新为选定的值。关于如何在选项 returned 后将价值绑定到交易的任何想法？

Answer 1

已通过使用 Jquery 承诺延迟方法调用直至完成进行修复。

我现在叫 $.when(GetRanges(Deal.VehicleManufacturerId)).then(function () { self.Deal(Deal) }); 而不是

GetRanges(Deal.VehicleManufacturerId);
self.Deal(Deal);

第二个级联下拉淘汰赛没有设置返回值

Second cascading dropdown knockout not setting with returned value

c#

knockout.js

asp.net-web-api2