选项标题和订阅下拉列表淘汰赛

Question

我有一个下拉列表，它具有某些状态，例如Delivered，Canceled，Failure，Inprogress。我使用下拉来使用knockout绑定值。以下是示例代码。

<select id="ddlStatus" data-bind="options: status, optionsText: 'statusName', optionsValue:  'statusId', optionsCaption: '', value : $root.SelectedStatus"></select>

我希望将optionsCaption默认为＆＃34; status＆＃34;的第一个选项。采集。基本上不是下拉列表中的硬编码标题，我希望状态中的第一个选项是默认选项。我正在使用订阅＆＃34;选择状态＆＃34;如果我不给出Optionscaptions，它每次调用。

Answer 1

默认行为

当knockout渲染视图中的选项时，它会尝试立即同步正确的选择：

ko.applyBindings({ options: [1, 2, 3], selection: ko.observable(2) })

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select data-bind="options: options, value: selection"></select>

您的问题的原因

如果您没有预定义的选择，则knockout将默认为选项列表中的 first 项（就像普通的静态HTML <select>元素一样。）

由于value绑定绑定双向，因此在调用selected时，实际设置 applyBindings 。

将触发selection的任何订阅：

var vm = { options: [1, 2, 3], selection: ko.observable() };
vm.selection.subscribe(console.log.bind(console, "CHANGED:"));

ko.applyBindings(vm)

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select data-bind="options: options, value: selection"></select>

解决方案

如果您不希望此订阅开心，最简单的解决方案是使用默认值预定义selection：选项中的第一项：

将触发selection的任何订阅：

var vm = { options: [1, 2, 3], selection: ko.observable() };

// Make sure there's a defined selection that is in our options:
vm.selection(vm.options[0])

vm.selection.subscribe(console.log.bind(console, "CHANGED:"));

ko.applyBindings(vm)

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select data-bind="options: options, value: selection"></select>