javascript - KO.js foreach 绑定(bind)中的分组结果

Question

我不知道如何在 KOjs 的 foreach 中使用迭代。我需要的是像这样对数组的内容进行分组

Var x = [{name: Joel, sex: male}, {name: Eric, sex: male},{name:Elliot, sex:female}, {name:Mary, sex:female}]

因此，生成的数据绑定(bind) foreach 将显示该人的性别，但仅作为标签显示一次。像这样的事情

-male
Joel
Eric
-female
Elliot
Mary

使用普通的 for 循环，就像创建一个变量来保存最后一个条目的性别一样简单，如果它发生变化，则打印新的性别。类似的东西

If(this.sex != cachedSex){
 cachedSex=this.sex;
console.log(cachedSex);
}

但我不知道如何在 KO.js 中做到这一点请给我一个建议。

Answer 1

Knockout 允许您使用计算的可观察量以巧妙的方式解决这个问题:)

如果您想要完整的代码示例 here is a fiddle illustrating this solution .

假设您的所有人员都称为 people，它是一个 observableArray :

var that = this;
this.people = ko.observableArray([{name: Joel, sex: male}, {name: Eric, sex: male},{name:Elliot, sex:female}, {name:Mary, sex:female}])

现在我们只想将雄性和雌性分开:

this.males = ko.computed(function(){
    return that.people().filter(function(person){
        return person.sex === "male";
    });
});
this.females = ko.computed(function(){
    return that.people().filter(function(person){
        return person.sex === "females ";
    });
});

(当然 - 如果你经常重复这种代码 - 用它创建一个函数而不是重复自己:) )

然后就可以正常进行foreach绑定(bind)了，一次为females，一次为males