javascript - 面临模型下拉列表设置值的问题

Question

我将 MVC 与 KnockoutJs 结合使用，并遇到 value 绑定(bind)问题。

 @Html.DropDownListFor(m => m.PrimarySubspecialty, Model.PrimarySubspecialties, new { id = "ddUserDetailsPrimarySubSpeciality", style = "width:245px;height:25px;", @class = "nmc-select", data_bind = "options: primarySubSpecialities,optionsText: 'Name',optionsValue: 'Id',value:PrimarySubspecialty" })

我不确定为什么模型中的 PrimarySubspecialty 值没有绑定(bind)到下拉列表中选定的值。

这是我的js代码:

this.PrimarySubspecialty = Ko.observable($('#ddUserDetailsPrimarySubSpeciality').val());
this.primarySubSpecialities = ko.observableArray([]);

function loadPrimarySubSpecilaities() { 
    $.ajax({
        type: 'GET',
        url: primarySubSpecialityUrl,
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        processdata: false,
        cache: false,
        success: function (data) {

            primarySubSpecialities = [];

            try {
                if (data.length == 0) {

                    primarySubSpeacilityDropdownId.empty();

                }
                model.primarySubSpecialities(data);
            }
    });
}

请告诉我如何将值设置为 PrimarySubSpeciality 下拉列表。

Answer 1

当使用异步方法填充下拉列表或选择列表时，您必须小心避免在填充列表之前绑定(bind)所选值。

如果更改列表，Knockout 将仅保留列表中存在的绑定(bind)值。如果没有，该值将设置为未定义。

要更正您的代码，请将值保存在变量中，并且仅在列表填充后设置可观察值:

var holdingValue = $('#ddUserDetailsPrimarySubSpeciality').val();
this.PrimarySubspecialty = Ko.observable();

然后在列表填满后设置值:

model.primarySubSpecialities(data);
model.PrimarySubspecialty(holdingValue);

我已经完成了一个快速的 JSFiddle 测试页来演示这一点:https://jsfiddle.net/Quango/0bxaqLf8/