第二级联下拉淘汰赛未设置返回值

Question

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

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

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 API 返回选项之前将下拉列表更新为所选值。有什么想法可以在返回选项后将值绑定到交易？

Answer 1

通过使用 Jquery 承诺将方法调用推迟到完成进行修复。

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

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