KnockoutJS: как установить начальное значение из выпадающего списка, когда данные извлекаются асинхронно с использованием JSON?

Question

Проблема связана с this и this .

Проблема заключается в том, что когда список опций еще не заполнен действительными данными (потому что вызов JSON возвращаетасинхронно), вы не можете установить начальное выбранное значение.

function PersonViewModel() {
    // Data members
    this.Function_Id = ko.observable('@(Model.Function_Id)');
    this.Functions = ko.observableArray([{ Id: '@(Model.Function_Id)', Name: ''}]); // This works
    //this.Functions = ko.observableArray(); // This does not work
    this.SubFunctions = ko.observableArray();

    this.GetFunctions = function () {
        var vm = this;

        $.getJSON(
            '@Url.Action("GetFunctions", "Function")',
            function (data) {
                vm.Functions(data);
                if (vm.Function_Id() === undefined) {
                    //vm.Function_Id('@(Model.Function_Id)'); // Only way to solve my problem?
                }
            }
        );
    };
}

$(document).ready(function () {
    var personViewModel = new PersonViewModel();
    ko.applyBindings(personViewModel);

    personViewModel.GetFunctions();
});

См. это измененное fiddle

Answer 1

function Item(id, name) {
    this.id = ko.observable(id);
    this.name = ko.observable(name);
}

var viewModel = {
    selectedItem: ko.observable(),
    //items: ko.observableArray([new Item(3, "")])
    items: ko.observableArray()
};

ko.applyBindings(viewModel);
var selectedIndex = 3;
setTimeout(function() {

    viewModel.items([
        new Item(1, "pencil"),
        new Item(2, "pen"),
        new Item(3, "marker"),
        new Item(4, "crayon")
        ]);
    var selectedValue;
    $.each(viewModel.items(), function(index, item) {
        if (index === selectedIndex) {
            selectedValue = item;
        }
    });
    viewModel.selectedItem(selectedValue);
}, 1000);

h2 { font-size: 1.1em; font-weight: bold; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<select data-bind="options: items, optionsText: 'name', value: selectedItem"><option selected="selected"></option></select>
<div data-bind="with: selectedItem">
<span data-bind="text: name"></span>
    </div>

Answer 2

Благодаря «RP Niemeyer» и «Sandeep G B» я создал это решение .

Может быть, это также идея добавить свойство 'initialValue' в функцию привязки данных для атрибута привязки данных из выбора, подобного этому:

<select id="Function_Id"
    data-bind='
        options: Functions,
        optionsValue : "Id",
        optionsText: "Name",
        initialValue = 1,
        value: Function_Id,
        optionsCaption: Functions().length == 0 ? "Loading..." : "--NONE--"'>
</select>