Question

我的问题如下：我正在尝试使用复选框绑定将对象数组绑定到所选对象列表。我的问题是，我想将整个对象绑定到列表，如下所示：

<div data-bind="foreach: items">
    <div>
        <input type="checkbox" data-bind="checked: $parent.selectedItems, value: $data">
    </div>
</div>

其中 items 是要绑定到 selectedItems 可观察数组的对象列表。

但是，要检查值是否“已选中”，我想比较各个对象属性。这样做的原因是我从不同的来源收集对象，有些代表同一个对象，但它们并不完全相同。此外，我需要在其他函数中使用所选对象的某些子属性，因此我需要将整个对象绑定到可观察数组。

提前感谢任何建议！

Answer 1

您可以在绑定中使用函数。

<input type="checkbox" data-bind="checked: isChecked($data), ...">

请记住绑定将您的代码包装到计算中，以及如何自动刷新ui。这意味着Knockout也可能不会在你期望的时候更新ui。

但是，实际上，您需要在视图模型中获得一致的数据。

Answer 2

如果你深入了解淘汰api，你可以看到＆＃39;检查＆＃39;参数是一个数组，绑定处理程序确定值是否在数组中：

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

通常，checkedValue（）将设置为选项中的项目，具有与＆＃39; $ data＆＃39;相同的值：

var list = ko.observableArray({ value: "One" }, { value: "Two" });
var objectsInList = ko.observableArray(list[0]);

在像这样的选项绑定中，未指定checkedValue，$ data的值将是对象：

<select data-bind="options: list, checked: objectsInList">

我没有指定checkedValue，因此在checked绑定处理程序中，它将根据对象引用执行arrayIndexOf（）操作。

在淘汰赛文档中指定了您想要做的事情： http://knockoutjs.com/documentation/checked-binding.html

您可以在data-bind参数中设置checkedValue，如下所示：

var list = ko.observableArray({ value: "One" }, { value: "Two" });
var objectsInList = ko.observableArray("One");

<select data-bind="options: list, checked: objectsInList, checkedValue: 'value'">

如果你想处理多个对象参数，我认为你需要编写自己的绑定处理程序。

Answer 3

将您的HTML更改为

data-bind="foreach: { data: items, as: 'item'}">
  <div>
    <input type="checkbox" data-bind="checked: item.checked, value: item.value">
  </div>
</div>

将您的商品结构为

this.items = ko.observableArray([
    {checked: true1, value : value1},
    {checked: true2, value : value2},
    {checked: true3, value : value3},
])

当然，在现实生活中，你没有名为true1，value1等的变量，它们是从API返回的json数据

注意：为了避免在viewModel的开头可能需要this的问题

`var self = this`

并使用

`self.items = `

Knockout：如何使用带有可观察的整个对象数组的检查绑定，但比较各个属性？

3 个答案: