Question

我在select绑定上下文中有一个with。

<div data-bind="with: SelectedItem">
    <select id="select" data-bind="options: $root.OptionsList, optionsText: 'description', optionsValue: 'opt_id', event: { change: $parent.OptionSelectionChanged }, optionsCaption: 'Select'"></select>
</div>

我本以为以下内容将包含$root.OptionsList中所选项目的输出，但我却得到了$root.SelectedItem。

function MyViewModel() {
    self.OptionSelectionChanged = function(data, event) {
        console.log(data) // outputs $root.SelectedItem
    }
}

在此示例中，$root.OptionsList是可应用于$root.SelectedItem的属性的列表（这是$root.AvailableItems中项目的克隆，后者是较大的关系型，对象）。

因此，当用户在更改事件中从包含$root.OptionsList的Select中选择一个选项时，我会更新$root.SelectedItem.SelectedOptions，这会导致UI更新并将Select重置为空以再次显示标题。 / p>

如何在更改事件中获取所选选项的值？我做错了什么，还是我的期望不正确/被误导了？我已经设法使用jQuery和event.CurrentTarget来获取值，但我认为这似乎有点“错误”，即使它可以作为淘汰赛使用，但我应该向我发送在下拉列表中选择的值。

Answer 1

我从来没有遇到过在select绑定中使用with绑定而不使用with绑定中与对象相关的选项的情况。将元素发送到with处理程序时，binding context绑定如何更改change似乎也很奇怪。

但是，一种解决方法是在observable对象上定义一个root，以保存从dropdown中选择的值，并在{{ 1}}控件

value

看看fiddle

Answer 2

event出价的第一个参数是当前的$data绑定上下文。您的情况是SelectedItem
如果要在更改下拉菜单时调用函数，请使用subscribe
您需要向value添加一个select绑定

我仍然不确定为什么要在with:SelectedItem中添加select。如果您在下拉菜单中选择默认的select值，则该下拉菜单将完全不可见

这是一个有效的代码段，在加载时设置了默认的SelectedItem

function MyViewModel() {
    const self = this;
    self.SelectedItem = ko.observable(1);
    self.OptionsList = ko.observableArray([{description: "1", opt_id:1},{description: "2", opt_id:2}])
    self.SelectedItem.subscribe(function(data) {
        console.log(data);
    })
}

ko.applyBindings(new MyViewModel())

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="with: SelectedItem">
    <select id="select" data-bind="options: $root.OptionsList, optionsText: 'description', optionsValue: 'opt_id', value: $root.SelectedItem, optionsCaption: 'Select'"></select>
</div>

嵌套上下文中的更改事件处理程序中未获取正确的数据上下文

2 个答案: