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个可观察数组并返回彼此匹配的数据。所以在我们的例子中它将是“两个”和“三个”

执行此操作后，我将其绑定到复选框，该复选框将复选框设置为具有匹配数据的复选框。我提出了小提琴here

我想将复选框与来自observable array dataTwo的值绑定。怎么做到这一点？

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

我现在更新了小提琴。您可以看到我是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();

然后使用compare来获取两个数组中的那些：

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" />

工作fiddle。

将可观察数组与不同元素进行比较

1 个答案: