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个值发送回服务器而不只是一个，只使用值字段是不够的。所以在这个控件下面我有两个隐藏的字段，如下所示：

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

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

我尝试在模型上的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个隐藏字段确实设置了默认项目值，因此它就像选择控件将所选项目重置回第一个默认项目一样。

我还尝试在选择控件和ko foreach上设置一个afterRender，这样我就可以在淘汰赛完成渲染后设置所选项目，但我遇到了同样的问题而且没有任何变化。< / p>

对此问题的任何帮助将不胜感激。如果您希望我详细了解某个区域以帮助您解决问题，请与我们联系。

Answer 1

我有几点意见：

ViewModel.groups应该是一个observableArray。

尝试向ViewModel添加一个不可观察的defaultItem参数：

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

不存在'选项'（单数）绑定。更新您对options元素的绑定，将'option'更改为'value'，并添加此'attr'组件：

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

KnockoutJS：使用foreach

1 个答案: