解决不一致的敲除检查绑定

Posted 2023-03-27

【中文标题】解决不一致的敲除检查绑定

【英文标题】：work around inconsistencies knockout checked binding

【发布时间】：2013-12-23 06:53:32

【问题描述】：

我在没有淘汰赛检查绑定的情况下苦苦挣扎。看到这个fiddle example。

我的两个问题是：

如何让“选定值”成为一个带有复选框/收音机输入的丰富 JS 对象？对于其他输入类型和绑定，所选值可以是丰富的类型。但是复选框/单选按钮只能是一个简单的字符串值。

一般来说，我有几个来自数据库的查找列表，它们是地图数组。例如，在小提琴示例中，我有一个国家列表：

[
  countryName: "UK", countryPopulation: 650000000,
  countryName: "USA", countryPopulation: 1700000000,
  countryName: "Canada", countryPopulation: 320000000
]

对于我拥有的几乎每个表单输入，我都希望“选定值”是一个丰富的 JS 对象。在小提琴的单选按钮示例中，我希望 selectedCustomerType 为：

label: 'Acquiring', value: 'A'

不仅仅是：

'A'

初始化单选按钮似乎也不起作用。我可以使用第 15 行的 JS 代码使视图看起来正确：

self.selectedCustomerType = ko.observable(self.availableCustomerTypes()[0].value);

（很遗憾，我必须使用 self.availableCustomerTypes()[0].value 进行初始化，而不仅仅是使用 self.availableCustomerTypes()[0]。）

但即使视图看起来正确，html 绑定也不会显示任何内容（HTML 的第 21 行）。

<div>
  You have chosen customer type
  <span data-bind:"value: selectedCustomerType()"></span>.
</div>

但在输出中未显示 selectedCustomerType。如何正确初始化 selectedCustomerType？

【参考方案1】：

在 KO 3.0 中，您现在可以使用 checkedValue 绑定以及元素的 checked binding to specify specifically what the value will be (rather than setting thevalue` 属性并将其值用作字符串。

所以，你现在可以这样做了：

data-bind='checkedValue: $data, checked: $root.selectedCustomerType'

通过该更改，您现在可以仅使用 self.availableCustomerTypes()[0] 对其进行初始化。

更新小提琴：http://jsfiddle.net/rniemeyer/8GJpF/

有关更多信息，请在此处查找checkedValue：http://knockoutjs.com/documentation/checked-binding.html

【讨论】：

谢谢。这让我达到了 95%。它让我走上了深入研究有点神秘的 $data 变量的轨道。但是，不幸的是，在您的小提琴示例中，请注意第 21 行的 永远不会被绑定或更新。我希望它最初设置，并且当所选单选按钮更改时它会更改。为什么这不起作用？再次感谢！

另一件事......当您检查您提供的小提琴中的实际 DOM 时，查看实际的无线电 标记值设置为 string [object Object ]，但不是实际对象本身。在任何一种情况下，我们实际上都希望 value 仍然设置为“A”或“N”，但 selectedCustomerType 是底层对象。

我更新了小提琴。您可以使用attr: value: value 来确保正确设置value 属性。对于另一个问题，您需要在span 上使用text 绑定，并且需要使用data-bind= 而不是data-bind: