可见绑定和动态css绑定

Visible binding and dynamic css binding

本文关键字：绑定 css 动态      更新时间：2023-09-26

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

JSFiddle with description

我的问题说明在http://jsfiddle.net/96vdD/7/和这里描述:

三个people穿过foreach。向网格中添加3个div。动态地，Knockout为每秒钟从foreach输出的div分配一个css类last。

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

CSS将剥去网格中每个.last div的边距，以防止每个div被移动到下一个"行"。CSS中常见的布局技术。

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

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

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

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

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/

相关文章：