Question

我对knockoutJS有一个问题我无法弄清楚

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

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

Answer 1

我会使用.filter或ko.utils.arrayFilter，以及.indexOf或同等对象：

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上使用更高效的.map和.filter方法，请参阅Knockout Projections插件

Answer 2

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

myObservableArray.removeAll（['Chad'，132，undefined]）删除全部等于'Chad'，123或undefined的值，并将它们返回为阵列

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

Answer 3

如果你想在不修改原始数组的情况下返回一个新数组，最好的办法是使用一个计算的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/

编辑：修复了示例代码。

Answer 4

编辑：

由于我的具体问题，是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属性的对象。

KnockoutJS：从数组中删除项目数组

4 个答案: