针对另一个 observableArray 淘汰过滤器 observableArray

Question

假设我有一个名为completeArray 的observableArray 和另一个名为pickedArray 的observableArray，第二个数组(pickedArray) 包含了completeArray 的一些对象。从这 2 个数组中，我需要创建另一个 observableArray，它将包含我的 completeArray 中不在pickedArray 中的所有对象。如果有人可以帮助我如何完成，请在需要澄清的情况下发表评论。谢谢！

Answer 1

使用completeArray 和pickedArray 之间差异的computed observable 数组。

Javascript

var ViewModel = function () {
    var self = this;

    self.completeArray = ko.observableArray([{id: 1, name: "john"}, {id: 2, name: "bill"}, {id: 3, name: "tom"}]);
    self.pickedArray = ko.observableArray([{id: 1, name: "john"}, {id: 3, name: "tom"}]);

    self.diffArray = ko.computed(function() {
        return ko.utils.arrayFilter(self.completeArray(), function(completeItem) {
            var sameItem = false;

            ko.utils.arrayForEach(self.pickedArray(), function(pickedItem) {
                if(pickedItem.id == completeItem.id && pickedItem.name == completeItem.name) {
                    sameItem = true;
                    return; // break out of this loop
                }
            });

            return !sameItem;
        });
    }, self);
};

$(function () {
    var vm = new ViewModel();
    ko.applyBindings(vm);
});

HTML

<h1>Complete Array</h1>
<div data-bind="foreach: completeArray()">
    <span data-bind="text: $data.name"></span>
</div>

<h1>Picked Array</h1>
<div data-bind="foreach: pickedArray()">
    <span data-bind="text: $data.name"></span>
</div>

<h1>Diff Array</h1>
<div data-bind="foreach: diffArray()">
    <span data-bind="text: $data.name"></span>
</div>

输出

完整数组
约翰比尔汤姆

选择数组
约翰·汤姆

差异数组
账单

示例

http://jsfiddle.net/jdtjmy6u/3/