knockout.js - KnockoutJS：从数组中删除项目数组

Question

我对 knockoutJS 有疑问，我不知道

我有两个 observableArrays；一个包含所有可用项目，一个包含所有选定项目。

我如何返回一个包含所有可用项目的新数组（其中删除了所有选定的项目）？

Answer 1

我会使用.filteror ko.utils.arrayFilter, and .indexOfor 等​​价物：

this.remainingOptions = ko.computed(function(){
    return this.availableOptions().filter(function(option) {
        return this.selectedOptions().indexOf( option ) === -1;
    }.bind(this));
},this);

小提琴：http: //jsfiddle.net/p3RMD/1/

编辑：如果您想要更高效的observableArrays 方法，另请参阅Knockout Projections插件.map.filter

Answer 2

标准的 removeAll 方法应该处理这个问题。从文档：

myObservableArray.removeAll(['Chad', 132, undefined]) 删除所有等于 'Chad'、123 或 undefined 的值并将它们作为数组返回

您是否需要在不更改原始所有可用项目数组的情况下提取可用项目？

Answer 3

编辑：

由于我的具体问题是 observableArrays 包含对象（我未能在我的问题中说明）。提供的答案并没有解决我的问题，尽管它确实很好地回答了这个问题，这就是我不改变答案的原因。

对于任何对我如何解决问题感兴趣的人，这里是代码：

    var self = this;
    self.users = ko.observableArray([]);
    self.roles = ko.observableArray([]);
    self.selectedUser = ko.observable();

    self.remainingOptions = ko.computed(function () {
        return (self.roles()).filter(function (option) {
            var current = option.Name();
            var keep = true;
            if (self.selectedUser() !== undefined) {
                ko.utils.arrayFirst(self.selectedUser().Roles(), function (item) {

                    if (keep) {
                        keep = (current !== item.Name());
                    }
                    return (current === item.Name());
                });
            }
            return keep;
        }); //end  filter
    }); //end remaininOptions

Role 对象只是一个具有 Name 属性的对象。

Answer 4

如果你想返回一个新数组，而不修改原始数组，最好的办法是使用计算的 observable。

var ViewModel = function(){
    this.available = ko.observableArray([1,2,3,4,5]);
    this.selected = ko.observableArray([1,3,5]);

    this.remaining = ko.computed(function(){
        var remaining = ko.observableArray();
        remaining(ko.toJS(this.availableOptions))
        remaining.removeAll(this.selectedOptions());
        return remaining();
    }, this);
}

这是一个工作示例的链接：

http://jsfiddle.net/nathanjones/p3RMD/

编辑：固定示例代码。