选择相互依赖并在淘汰赛中预选值答案

【问题标题】：Select with Dependency On Each Other and values preselected in knockout选择相互依赖并在淘汰赛中预选值
【发布时间】：2015-07-01 21:37:06
【问题描述】：

我有一个带有第一个请求的页面，我在其中恢复了页面的所有必要数据。

这个信息是这样的：

“A1”：8， “A2”：61， “A3”：585， “A4”：空.........等

其中每个值都是特定选择的 id，该选择在淘汰赛中加载：

<div class="col-lg-3 col-md-3">
    <label class="obligatory">*</label>
    <label for="id_A1">A1</label>
    <select class="form-control" data-bind="options: $root.A1List, optionsText: 'A1name' , optionsValue: 'idA1', value: $data.A1, optionsCaption: '---------------'"></select>
</div>
<div class="col-lg-3 col-md-3">
    <label class="obligatory">*</label>
    <label for="id_A2">A2</label>
    <select class="form-control" data-bind="options: $root.A2List, optionsText: 'A2name' , optionsValue: 'idA2', value: $data.A2, optionsCaption: '---------------'"></select>
</div>
<div class="col-lg-3 col-md-3">
    <label class="obligatory">*</label>
    <label for="id_A3">A3</label>
    <select class="form-control" data-bind="options: $root.A3List, optionsText: 'A1name' , optionsValue: 'idA3', value: $data.A3, optionsCaption: '---------------'"></select>
</div>
<div class="col-lg-3 col-md-3">
    <label class="obligatory">*</label>
    <label for="id_A4">A4</label>
    <select class="form-control" data-bind="options: $root.A4List, optionsText: 'A4name' , optionsValue: 'idA4', value: $data.A4, optionsCaption: '---------------'"></select>
</div>

这些选择在您选择的功能中相互依赖：

root.A2List = ko.observableArray([]);
root.A2ListFuncion = ko.computed(function(){
    $.ajax({
        url: RUTA_GLOBAL + "/api/A2/",
        dataType: 'json',
        async: true,
        type:'GET',
        data: {
            A1: root.Data().A1()
        },
        success: function(data) {
            root.A2List(ko.mapping.fromJS(data)());
        }
    });

}, root);
root.A3List = ko.observableArray([]);
root.A3ListFuncion = ko.computed(function(){
    $.ajax({
        url: RUTA_GLOBAL + "/api/A3/",
        dataType: 'json',
        async: true,
        type:'GET',
        data: {
            A1: root.Data().A1()
            A2: root.Data().A2()
        },
        success: function(data) {
            root.A3List(ko.mapping.fromJS(data)());
        }
    });

}, root);
root.A4List = ko.observableArray([]);
root.A4ListFuncion = ko.computed(function(){
    $.ajax({
        url: RUTA_GLOBAL + "/api/A4/",
        dataType: 'json',
        async: true,
        type:'GET',
        data: {
            A1: root.Data().A1()
            A2: root.Data().A2()
            A3: root.Data().A3()
        },
        success: function(data) {
            root.A4List(ko.mapping.fromJS(data)());
        }
    });

}, root);

我得到了每个select的所有值都正确，但是我丢失了正确的值或id 用户第一次提出请求时应该选择哪一个。我理解由于我的 select 的计算列表，我想要的功能，但我需要第一次当页面第一次加载时每次选择中的预选值。

有什么想法吗？

【问题讨论】：

您的代码示例不完整。您在哪里为 A1、A2、A3、A4 赋值？这应该在创建计算的 observables A*ListFunction 之后完成。此外，您对淘汰赛计算的可观察量的使用非常奇怪。最好用淘汰订阅功能替换它，以提高可读性。
对不起，我没看懂你，代码完整
您的问题是因为绑定“value: $data.A1”在列表 A1List、A2List、A3List、A4List 填充值之前执行。在这种情况下，淘汰赛将找不到对应的选项，并将重置值。

标签： javascript jquery knockout.js knockout-mapping-plugin

【解决方案1】：

感谢您提供的线索：

root.A3ListFuncion = ko.computed(function(){
    $.ajax({
        url: RUTA_GLOBAL + "/api/A3/",
        dataType: 'json',
        ***async: false,***
        type:'GET',
        data: {
            A1: root.Data().A1()
            A2: root.Data().A2()
        },
        success: function(data) {
            root.A3List(ko.mapping.fromJS(data)());
        }
    });

将 ajax 请求更改为 async false 问题已解决。

【讨论】：