Javascript 分组会导致KO.js foreach绑定

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

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

-male
Joel
Eric
-female
Elliot
Mary

因此，结果数据bind foreach将显示此人的性别，但仅作为标签显示一次。 像这样的

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

-male
Joel
Eric
-female
Elliot
Mary

使用normal for循环，只需创建一个保存最后一个条目性别的变量，并在其发生变化时打印新条目即可。差不多

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

但我不知道如何在KO.js中实现这一点

---

请给我一个建议

Knockout允许您使用计算的可观测值，以一种巧妙的方式解决此问题：）

如果您想要完整的代码示例

假设你所有的人都被称为

人

，这是一个

可观察的日子

：

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

绑定，一次用于

雌性

，一次用于

雄性

，敲除允许您使用计算的可观测值，以巧妙的方式解决此问题：）

如果您想要完整的代码示例

假设你所有的人都被称为

人

，这是一个

可观察的日子

：

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

绑定，一次用于

雌性

，一次用于

雄性

，Benjamins的回答是正确的，但还有另一种方法，无需创建额外的可观察的页面。在视图中，您可以简单地执行foreach绑定，并在其中放置一条逻辑来处理过滤。这是最简单的方法，但在今后的道路上，你可能会争辩说，根据你的应用，可能会有更适合的替代品，如benjamins 男人

---

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

Benjamins的答案是正确的，但还有另一种方法，无需创建额外的可观察页面。在视图中，您可以简单地执行foreach绑定，并在其中放置一条逻辑来处理过滤。这是最简单的方法，但在今后的道路上，你可能会争辩说，根据你的应用，可能会有更适合的替代品，如benjamins 男人

---

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

谢谢您的想法。但是，有没有其他不那么依赖硬代码的方法来解决这个问题呢？例如，如果我不仅需要使用性别筛选，还需要使用组筛选，而我不知道将有多少组？@Kresent的核心概念是在这里使用计算的可观察值：）您可以创建一个

computed

，使用

reduce

或甚至一个普通For循环（性别等）按给定的属性名对它们进行分组，然后使用嵌套的foreach绑定：foreach group-group title，foreach member-show member data。但是，有没有其他不那么依赖硬代码的方法来解决这个问题呢？例如，如果我不仅需要使用性别筛选，还需要使用组筛选，而我不知道将有多少组？@Kresent的核心概念是在这里使用计算的可观察值：）您可以创建一个

computed

，使用

reduce

或甚至一个普通For循环（性别等）按给定的属性名对它们进行分组，然后使用嵌套的foreach绑定：foreach组-组标题，foreach成员-显示成员数据