javascript - 可见绑定(bind)和动态 css 绑定(bind)

Question

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

带有描述的 JSFiddle

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

三个人通过foreach。添加三个 div 到网格。 动态地，Knockout 将 last 的 css 类分配给来自 foreach 的每一秒 div。

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

CSS 将去除网格中每个 .last div 的边距，以防止第二个 div 移动到下一个'排'。 CSS 中的一种常见布局技术。

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

问题

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

问题

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

Answer 1

您可以创建一个只包含可见人的计算数组:

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

然后在你的 html 中绑定(bind)它:

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

fiddle - http://jsfiddle.net/96vdD/8/