Radio & Dropdown 到同一个 observable - Knockout

Posted 2023-05-09

【中文标题】Radio & Dropdown 到同一个 observable - Knockout

【英文标题】：Radio & Dropdown to same observable - Knockout

【发布时间】：2017-03-01 13:15:24

【问题描述】：

我为单选列表“已检查”数据绑定和下拉列表“值”数据绑定分配了相同的可观察值

 <select name="controls" data-bind="options: cars(), optionsText:'make', optionsValue:'id', value: $root.selectedId, optionsCaption: 'Select One'"> </select>

 <div data-bind="foreach: cars">
      <div>
        <input type="radio" name="controls" data-bind="checked: $root.selectedId, checkedValue: id, value: id"><div data-bind="text:make">
      </div>
</div>

因为，默认情况下，下拉菜单始终包含一些值“选择一个”或选定值。不允许用户在单选按钮列表上进行选择。当用户单击单选按钮时，它不会被选中/选择。

我可以通过两个不同的 observable 来修复，但由于某种原因，我想保持相同的 observable

jsFiddle - https://jsfiddle.net/9vm01e3r/2/

【问题讨论】：

你能提供一个工作小提琴吗？

@AldoRomo88 包括小提琴。出于某种原因，单选按钮不是从可观察数组中填充的。但与其他单选按钮类似的问题。 jsFiddle - jsfiddle.net/9vm01e3r

【参考方案1】：

对于提供的小提琴，我在您的 html 中发现了两个不同的问题

在foreach 绑定上下文中更改为当前项，您需要使用$parent 访问selectedCar 属性。 输入/收音机位于带有文本绑定的标签内，处理此绑定时将替换所有内部内容

你的 html 应该是这样的

 <div data-bind="foreach: cars">
 <label data-bind="text:name"></label>
 <input type="radio" data-bind="checked: $parent.selectedCar, checkedValue: id, value: id" />
 </div>

编辑

好的，我知道发生了什么，当您从收音机中单击一个选项时，该项目不是选择标签的有效项目，因为它不在 options 数组中，然后敲除将 value 设置为未定义，导致收音机被取消选择.

所以另一种选择是在选择标签上使用valueAllowUnset: true（文档here）

请看这个更新的小提琴 https://jsfiddle.net/tbdo4rxq/

【讨论】：

太棒了！！这解决了我 95% 的问题。当我从电台列表中挑选一些东西时。下拉菜单变得空白。是否可以默认“选择一个”

我不认为这是可能的，为了达到这种效果，您将需要一个更复杂的解决方案，也许您最初建议使用不同的 observables

是否可以使用单选按钮上的单击事件将下拉菜单设置为默认值（--选择一个--）？

这听起来有点奇怪，因为你会违反 mvvm principales。在您看来，“选择一个”意味着视图模型在属性 selectedCar 上具有未定义的值，您可能需要相互排斥的选择，或者两个选择一个用于制造商，另一个用于汽车（由选定的制造商过滤），这对我来说听起来更自然。