knockout.js复选框与observableArrays的双向绑定

knockout.js two-way binding of checkboxes with observableArrays

本文关键字：绑定 observableArrays js 复选框 knockout      更新时间：2023-09-26

我是淘汰赛的新手，在让复选框做我想做的事情时遇到了一些问题。首先，以下是我迄今为止尝试的内容：http://jsfiddle.net/imagitron/mMc6k/，以及违规的代码行：

<input type="checkbox" data-bind="checked: $root.selectedItems"/>

本质上，我要做的是通过复选框链接两个数组，这样当我单击复选框时，它会存储定义数组中的对象，并将其保存到selectedItems数组中。此外，当我按下按钮时，removeItems函数不会清除数组。

提前感谢！

据我所知，淘汰赛不支持开箱即用。checked绑定将单个复选框的状态绑定到单个布尔属性。但是，要想以两种方式工作，您需要指示函数名称而不是函数调用（$root.someProperty而不是$root.someProperty()）。

value绑定对复选框没有意义。它用于绑定其他输入字段（如文本框）的值。

为了实现你想要的，你可以定义一个数组，每个复选框都有一个对象，如下所示：

var items = ko.mapping.fromJS([
    { label: 'Foo', checked: false },
    { label: 'Bar', checked: false }
]);

并像这样绑定：

<!-- ko foreach: items -->
    <input type="checkbox" data-bind="checked: checked"/>
    <span data-bind="text: label"/>
<!-- /ko -->

然后使用ko.computed函数检索数组的检查值：

var checkedItems = ko.computed(function() {
    return _.filter(items, function (item) { return item.checked() });
});

（这是一个隐藏的下划线库广告-如果你没有，据我记忆所及，knockout有类似的功能）

相关文章：