分组结果为 KO.js foreach 绑定

Question

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

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

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

-male
Joel
Eric
-female
Elliot
Mary

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

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

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

Answer 1

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

如果你想要一个完整的代码示例，这里有一个小提琴来说明这个解决方案。

假设你所有的人都被称为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绑定，一次用于females，一次用于males

Answer 2

Benjamins的回答是正确的，但还有另一种方法，而不必创建额外的observableArrays。 在视图中，您可以简单地执行 foreach 绑定，并在其中放置一些逻辑来处理过滤。 这是最简单的方法，但随着时间的推移，您可能会争辩说，根据您的应用，可能会有替代品，例如本杰明

男人

这将允许您在视图中执行一些基本的筛选。 还可以设置一个自定义绑定处理程序，可以在筛选器中传递该处理程序，以使其更加高效和干净