Question

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

我的代码如下。我已经修剪了它，但如果需要可以提供任何进一步的代码。非常感谢。

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 promises将方法调用推迟到完成来修复。

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

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

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

1 个答案: