cascaded dropdown prepopulate knockout MVC

问题

I am on the Update details screen and I have a Country and a state dropdown .I want to pre populate State dropdown on the basis of the selected Country. On the initial page load I do have the selected Country,Country Collection and Selected State all I need is to fetch the State Collection using AJAX.

Country List: <select id="CountryDropdownList" data-bind="options: viewModel.CountryCollection,optionsText:'CountryName',optionsValue:'CountryName',value:viewModel.SelectedCountry"></select>
State List: <select id="StateDropdownList" data-bind="options: viewModel.StateCollection,optionsText:'StateName',optionsValue:'StateName',value:viewModel.SelectedState"></select>



 <script>
        var viewModel = ko.mapping.fromJS(@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)));
        console.log(viewModel.SelectedState()); //State3 the initial value

        viewModel.SelectedCountry.subscribe(function (newSelectedCountry) {
            alert(newSelectedCountry);
            console.log(viewModel.SelectedState()); //undefined why?
            $.ajax({
                url: 'Home/GetStateList?Country=' + newSelectedCountry,
                success: function (data) {
                    viewModel.StateCollection(ko.mapping.fromJS(data)());
                    console.log(viewModel.SelectedState());  //state0 why?

                }
            })
        });


        ko.applyBindings(viewModel);
        $(function () {
            viewModel.SelectedCountry.valueHasMutated();
        })

    </script>

But when I try to fetch the state list through AJAX request the Selected State value gets reset and the first value in the list becomes the default selected value. I am confused, why does KO update my selected State value when I am not changing it at all?

But if I set the Selected State again in AJAX Success callback it works fine

viewModel.SelectedCountry.subscribe(function (newSelectedCountry) {
            alert(newSelectedCountry);

            $.ajax({
                url: 'Home/GetStateList?Country=' + newSelectedCountry,
                success: function (data) {
                    viewModel.StateCollection(ko.mapping.fromJS(data.StateCollection)());
                    viewModel.SelectedState(data.SelectedState);

                }
            })
        });

I am looking for a reason for this strange behavior.

回答1:

I have tried simplifying the code as directed by you and now I think it might help you to point out the issue.

<script>
        var viewModel = ko.mapping.fromJS(@Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model)));
        console.log(viewModel.SelectedState()); // o/p state3

        $.ajax({
            url: 'Home/GetStateList?Country=' + viewModel.SelectedCountry(),
            success: function (data) {
                viewModel.StateCollection(ko.mapping.fromJS(data)());
                console.log(viewModel.SelectedState()); // o/p state0
            }
        })
        ko.applyBindings(viewModel);

    </script>

来源：https://stackoverflow.com/questions/31471897/cascaded-dropdown-prepopulate-knockout-mvc