knockout.js - 预定义下拉列表中的选定值

Question

我有以下问题：

我有一个可观察的对象数组，格式为{ isSelected: false, Message: "Test1" }, { isSelected: true, Message: "Test2"}. 我正在从此可观察数组的视图中生成一个选择列表。我希望预先选择具有属性 isSelected = true 的值（在此示例中为： Message: "Test2"）。这是我的代码：

昏死：

function ViewModel()
{

    this.DummyOptions = ko.observableArray([{ isSelected: false, Message: "Test1" }, { isSelected: true, Message: "Test2"}]);
    this.selectedValue = ko.observable();
}

ko.applyBindings(new ViewModel());

html:

<div>
Dummy
<select id="dummy" data-bind="options: DummyOptions, optionsText: 'Message'"></select>
</div>

小提琴：http: //jsfiddle.net/PsyComa/RfWVP/52/

我相信这会很简单，但我对淘汰赛很陌生，我无法按预期工作。任何有关工作代码的帮助将不胜感激。谢谢你。

Answer 1

你是对的，这对于knockout.js来说确实很简单。

可以使用 "value" 绑定将 observable 绑定到当前选择的选项：

<select data-bind="options: DummyOptions,
                   optionsText: 'Message',
                   value: selectedValue"></select>

现在，只需使用带有“isSelected == true”的对象作为这个 observable 的初始值：

function ViewModel() {
    this.DummyOptions = ko.observableArray([...]);

    // Filter the array to find the first element with isSelected == true
    var selectedOption = ko.utils.arrayFirst(this.DummyOptions(), function(item) {
        return item.isSelected;
    });

    // Use this option as the initial value
    this.selectedValue = ko.observable( selectedOption );
}

http://jsfiddle.net/RfWVP/54/