KO.js foreach 绑定中的分组结果答案

【问题标题】：Grouping results in KO.js foreach bindingKO.js foreach 绑定中的分组结果
【发布时间】：2013-09-08 21:35:41
【问题描述】：

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

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 中制作这个请给我一个建议。

【问题讨论】：

请更新我们的努力

标签： javascript knockout.js

【解决方案1】：

Knockout 让您可以使用计算出的 observables 以巧妙的方式解决这个问题 :)

如果您想要完整的代码示例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了，一次绑定females，一次绑定males

【讨论】：

感谢您的想法。但是有没有更少依赖硬代码的方法来解决它？例如，如果我不仅需要使用性别过滤，还需要使用群组过滤，而我不知道会有多少个群组？
@Kresent 核心概念是在这里使用计算出的 observables :) 您可以创建一个 computed，使用 reduce 甚至是普通的 for 循环（性别等）按给定的属性名称对它们进行分组)，然后使用嵌套的 foreach 绑定：foreach 组 - 组标题，foreach 成员 - 显示成员数据。

【解决方案2】：

Benjamins 的答案是正确的，但还有另一种方法，无需创建额外的 observableArrays。在视图中，您可以简单地进行 foreach 绑定并在那里放置一些逻辑来处理过滤。它是最简单的方法，但您可能会争辩说，可能会有更适合的替代品，例如 benjamins，具体取决于您的应用程序

男士

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

【讨论】：