KnockoutJS：使用 foreach 时选择的选项

Question

我正在使用 KnockoutJS 来呈现 Select 控件，但为此我使用的是 ko foreach 绑定而不是选项绑定。选择区域目前如下所示：

<select class="form-control" data-bind="value: selectedItem">                        
    <option>-- Select an Item --</option>
    <!-- ko foreach: groups -->
        <optgroup data-bind="attr: { label: name }, foreach: items">
            <option data-bind="text: name, option: $data"></option>
        </optgroup>
    <!-- /ko -->
</select>

那么为什么我不使用选项绑定呢？原因是因为我需要将 2 个值发送回服务器，而不仅仅是一个，仅使用 value 字段是不够的。所以在这个控件下，我有 2 个隐藏字段，如下所示：

<input type="hidden" name="Model.SelectItemId" data-bind="value: selectedItem().itemId" />
<input type="hidden" name="Model.SelectedItemTypeId" data-bind="value: selectedItem().itemTypeId" />

这一切正常，按预期呈现并将正确的值传递给服务器。但是现在我希望能够根据传递到页面的值在选择字段上设置默认值，但我似乎无法让它工作。

我尝试在模型上的 observable 中设置一个值，如下所示：

function ViewModel() {
    ...
    this.groups = ko.observable(getGroups());
    // Set selected to a hardcoded item just for now to test
    this.selectedItem = ko.observable(this.groups()[0].items[1]);
}

不幸的是，这并没有什么不同，因为当页面呈现时，它仍然显示控件中的默认值 -- 选择一个项目 -- 选项，并且 2 个隐藏字段的值仍然为 0。但是请注意，当我删除从视图中选择控件并呈现页面 2 个隐藏字段确实设置了默认项值，因此就好像选择控件正在将选定项重置回第一个默认项。

我还尝试在 select 控件和 ko foreach 上设置 afterRender，以便在敲除完成渲染后以这种方式设置所选项目，但我遇到了同样的问题，没有任何改变。

对于这个问题的任何帮助将不胜感激。如果您希望我更详细地了解某个领域以帮助解决问题，请告诉我。

Answer 1

我有几个cmets：

1. ViewModel.groups 应该是 observableArray。

2. 尝试将不可观察的 defaultItem 参数添加到您的 ViewModel：

   function ViewModel() {
       this.groups = ko.observableArray(getGroups());
       this.selectedItem = ko.observable();
       this.defaultItem = this.groups()[0].items[1];
   }
   

3. “选项”（单数）绑定不存在。更新您对选项元素的绑定，将“选项”更改为“值”，并添加此“属性”组件：

   <option data-bind="text: name,
       value: $data,
       attr: { selected: ($data === $parents[1].defaultItem ? 'selected' : null) }">
   </option>