javascript - 使用 Knockout.js 创建数据绑定(bind)复选框时未选择任何内容

Question

我正在尝试使用 Knockout.js 创建一个复选框列表。列表本身来自数据绑定(bind)源，以及列表中的哪些项目被选中。我的模型看起来像这样:

var ViewModel = function ()
{
   this.areas = [{AreaId: 1, Name: 'Test 1'}, {AreaId: 2, Name: 'Test 2'}, {AreaId: 3, Name: 'Test 3'}];
   this.AreasImpacted = ko.observableArray([1, 2]);
};

现在，我想创建一个带有标签测试 1、测试 2 和测试 3 的复选框列表。我想检查测试 1 和测试 2。我的 HTML 看起来像这样:

<span class="areas" data-bind="foreach: areas">
  <label><input type="checkbox" data-bind="value: AreaId, checked: $parent.AreasImpacted" /><span data-bind="text: Name"></span></label>
</span>

这确实用正确的名称绘制了每个复选框，而且我可以验证每个复选框的value 属性是否设置正确，但是没有被选中!我还尝试将 this.AreasImpacted 设置为 2。当我这样做时，所有 3 个复选框都被选中!

完全糊涂了!

更新:

如果我将模型更改为:

this.AreasImpacted = ko.observableArray(['1', '2']);

然后事情按预期工作。

如果非要我猜的话，我会说 for-each 绑定(bind)正在将每个值转换为字符串。我很好奇这是设计使然还是 Knockout.js 错误。我希望输入的值是数字，因为这是我将其绑定(bind)到的值。

提交错误:

因为上面的代码不能像documented那样工作, 我已经提交了 bug在 GitHub 上。

Answer 1

您需要稍微改变一下，以检查 AreaId 是否您正在渲染的区域包含在 AreasImpacted 中数组:

data-bind="value: AreaId, checked: $parent.AreasImpacted.indexOf(AreaId) >= 0"

参见 this fiddle用于工作演示。

注意:使用此技术，选中或取消选中绑定(bind)的复选框之一将不会更新数据源。

或者，您可以将数组设为字符串列表，如下所示:

this.AreasImpacted = ko.observableArray(['1', '2']);

参见 this fiddle用于演示。

---

如评论中所述，KnockoutJS documentation似乎表明 OP 的原始语法应该有效。您甚至可以通过将数组中的项目转换为字符串 ( demo ) 来实现它。

KnockoutJS 源代码可以告诉我们为什么会发生这种情况。看 checked.js default binding查看决定是否检查输入的相关代码:

element.checked = ko.utils.arrayIndexOf(value, element.value) >= 0;

在这种情况下:

• value是区域 ID 的数组(数字，在 OP 的原始代码中)
• element是<input .../>复选框 HtmlElement

因此，element.value将始终为字符串类型，这就是为什么仅当数组中的项目也是字符串时才会选中复选框的原因。

这是否是 KnockoutJS 中的一个错误，或者只是一些意外但合乎逻辑的行为:我不确定。