3

我想比较 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 个可观察数组并返回相互匹配的数据。所以在我们的例子中，它将是“二”和“三”

完成此操作后，我会将其绑定到复选框，该复选框会将复选框设置为具有匹配数据的复选框。我在这里放了小提琴

我想将复选框与可观察数组 dataTwo 中的值绑定。如何做到这一点？

忘了提一下，在我的小提琴中，我只有一个复选框，但在我的实际场景中，它将是多个复选框，它们将绑定到数据。

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

4

1 回答 1

2

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

首先，在 viewModel 中添加一个 observable 数组：

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);
    }
});

然后你使用数据绑定：

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

工作小提琴。

于 2013-03-18T22:26:54.920 回答