knockout.js - 比较具有不同元素的可观察数组

Question

我想比较 2 个可观察数组。我已经定义了 2 个可观察数组，如下所示

var data1 = [{name1: "one"}, {name1: "two"}, {name1: "three"}];
var data2 = [{name2: "one"}, {name2: "two"}, {name2: "three"}];

dataOne: ko.observableArray(data1),
dataTwo: ko.observableArray(data2)

您可以看到 data1 的元素名称与 data2 不同。我希望比较 2 个可观察数组并返回相互匹配的数据。所以在我们的例子中它将是“二”和“三”

完成此操作后，我会将其绑定(bind)到复选框，这会将复选框设置为具有匹配数据的复选框。我放了 fiddle here

我想用可观察数组 dataTwo 的值绑定(bind)复选框。如何实现？

忘记提及，在我的 fiddle 中我只有一个复选框，但在我的实际场景中它将是多个复选框，它们将绑定(bind)到数据。

---

我现在已经更新了 fiddle 。您可以看到我正在将复选框绑定(bind)到 dataOne，但希望根据 datatwo 中的元素进行检查。

Answer 1

我必须承认，对于您要在这里实现的目标，我仍然很困惑。我建议您预处理这两个数组以生成一个包含两个数组中的值的数组。然后，当您遍历每个数组时，您可以查看当前值是否在重复项列表中，如果是，则选中该框。

首先，向您的 viewModel 添加一个可观察数组:

duplicates: ko.observableArray()

您可以使用以下方法展平每个数组:

var flattenedOne = ko.utils.arrayMap(this.dataOne(), function(item) {
    return item.name1;
});
flattenedOne = flattenedOne.sort();

var flattenedTwo = ko.utils.arrayMap(this.dataTwo(), function(item) {
    return item.name2;
});
flattenedTwo = flattenedTwo.sort();

然后使用比较来获取两个数组中的那些:

var differences = ko.utils.compareArrays(viewModel.flattenedOne, viewModel.flattenedTwo);
//return a flat list of differences
ko.utils.arrayForEach(differences, function(difference) {
    if (difference.status === 'retained') {
        viewModel.duplicates.push(difference.value);
    }
});

然后你使用数据绑定(bind):

<input type="checkbox" data-bind="checked: duplicates.indexOf(name1) !== -1" />

工作 fiddle .