可见绑定和动态CSS绑定

Question

在此示例中，淘汰赛按预期进行。 我正在寻找一种替代方法，以实现每隔第二个项目具有CSS类.last 动态填充网格的目标。 在某种程度上，我可能正在寻找一种不同的方法。

JSFiddle与说明

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

三people穿过foreach 。 将三个div添加到网格。 动态地，Knockout为从foreach出来的第二个div分配last的css类。

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

CSS将.last网格中每个.last div的边距，以防止第二个div移至下一个“行”。 CSS中的常见布局技术。

看看将Charles的可见性更改为true并运行JSFiddle时会发生什么。

问题

该示例中的第二个人Charles没有显示在网格中（因为他的visible属性设置为false ）。 但是，Denise仍移至下一行。 淘汰赛为Charles添加了style="display:none" ，但也向他应用了class="last"规则，而理想情况下，我希望Denise收到class="last"因为她在视觉上是网格中的第二people 。

题

应用class="last"规则时，如何让淘汰赛忽略!visible元素？

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/