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

Question

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

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

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

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

提前感谢您的任何建议！

Answer 1

将您的 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 数据

注意：为了避免 this 出现问题，您可能希望在 viewModel

的开头

`var self = this`

并使用

`self.items = `

Answer 2

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

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

请记住，绑定会将您的代码包装到计算中，这就是您获得自动 ui 刷新的方式。这意味着 Knockout 可能不会在您期望的时候更新 ui。

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

Answer 3

如果你深入挖掘 api 你可以看到当 'checked' 参数是一个数组时，绑定处理程序确定该值是否在数组中：

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

通常 checkedValue() 将设置为选项中的项目，具有与“$data”相同的值：

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() 操作。

你想做的在knockout文档里有说明： http://knockoutjs.com/documentation/checked-binding.html

您可以像这样在数据绑定参数中设置 checkedValue：

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

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

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

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

Knockout: How to use checked binding with observable array of whole objects, but compare individual properties?

javascript

arrays

mvvm

observable

knockout.js