KnockoutJS：当使用JSON异步检索数据时，如何从下拉列表中设置初始值？

问题涉及到和

问题在于，当选项列表尚未填充有效数据时（因为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();
});

请参见此修改的

功能项（id、名称）{
this.id=ko.可观察（id）；
this.name=ko.observable（name）；
}
var viewModel={
selectedItem:ko.observable（），
//项目：ko.observableArray（[新项目（3，”））
项目：ko.observableArray（）
};
应用绑定（视图模型）；
var-selectedIndex=3；
setTimeout（函数（）{
viewModel.items([
新项目（1，“铅笔”），
新项目（2，“pen”），
新项目（3，“标记”），
新项目（4，“蜡笔”）
]);
var选择值；
$.each（viewModel.items（），函数（索引，项）{
如果（索引===selectedIndex）{
selectedValue=项目；
}
});
viewModel.selectedItem（selectedValue）；
}, 1000);
h2{font size:1.1em；font-weight:bold；}
多亏了“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>


通常情况下，您会使用当前匹配值填充数组（如您所做），然后在AJAX调用后设置实际值（如您所做）。当返回实际项目时，当前选择的选项是否不在列表中？你能从这个提琴复制你的客户端场景吗：当项目被返回时，选择的选项在列表中，所以没有问题。我只是觉得奇怪，我需要向ko.observableArray提供一个假值，就像您在示例中所做的那样。值绑定强制所选值实际上在您的选项中。第一次它被绑定，这将不是真的。其他选项是稍后调用applyBindings（通常不可取）或稍后设置“selected”observables值（这与您在成功函数中得到的结果类似）。observableArray上没有可使用的DataLoaded事件吗？您可以在observable/observableArray/DependentToServable上使用手动订阅，以便在值更改时运行代码。您可以这样做：
vm.Functions.subscribe（function（）{//run your code here}，vm）//“this”设置为vm
您将自己的答案标记为正确答案，但它在您自己的小提琴中不起作用。Sandeep的解决方案仍然有效。我会把正确答案改成他的。