可见绑定和动态css绑定

Question

在这个例子中，Knockout正如预期的那样工作。我正在寻找另一种方法来实现在每个第二项上使用CSS类.last填充动态网格的目标。在某种程度上，我可能正在寻找一种不同的方法。

JSFiddle with description

我的问题在http://jsfiddle.net/96vdD/7/上有说明并在此处描述：

三个people通过foreach。将三个div添加到网格中。 动态地，Knockout为从last出来的每秒div分配一个foreach的css类。

同时，每个people的可见性属性决定他是否会在网格中显示。

CSS会删除网格中每个.last div的边距，以防止每秒div移动到下一行“＃”。 CSS中常见的布局技术。

看看当你改变Charles＆＃39; true的可见性并运行JSFiddle。

问题

示例中的第二个人Charles没有显示在网格中（因为他的属性visible设置为false）。但是，丹尼斯仍然搬到了下一排。 Knockout向Charles添加了style="display:none"，但也将class="last"规则应用于他，理想情况下，我希望Denise能够直观地接收class="last"，因为她是第二个people网格。

问题

在应用!visible规则时，如何让Knockout忽略class="last"个元素？

Answer 1

您可以创建仅包含可见人物的计算数组：

self.visiblePeople = ko.computed(function() {
    return ko.utils.arrayFilter(self.people(), function(person) {
        return person.visible;
    });
});

然后在你的html中绑定它：

<div class="wrapper" data-bind="foreach: visiblePeople">

小提琴 - http://jsfiddle.net/96vdD/8/