0

我正在使用敲除显示数据列表。这工作正常。

<ul>
    <li>Title</li><li>Tier1</li>
    <li>Title</li><li>Tier1</li>
    <li>Title</li><li>Tier1</li>
    <li>Title</li><li>Tier2</li>
    <li>Title</li><li>Tier2</li>
    <li>Title</li><li>Tier2</li>
<ul>

还有另一个要求。每当层级发生变化时，我都必须向 li 添加一个额外的类（仅针对第一行）。

<ul>
    <li class="x">Title</li><li class="x">Tier1</li>
    <li>Title</li><li>Tier1</li>
    <li>Title</li><li>Tier1</li>
    <li class="x">Title</li><li class="x">Tier2</li>
    <li>Title</li><li>Tier2</li>
    <li>Title</li><li>Tier2</li>
<ul>

这在KO中可能吗？在 for 循环中，我必须访问前一个项目的层并根据当前项目的层检查该值。

谢谢。

4

1 回答 1

2

您可以直接在 foreach 中调用视图模型中的函数来执行此操作。最简单的做法是从css绑定中调用它并返回一个值，指示是否应该应用该类。

html视图：

<div data-bind="foreach: items">
    <li  data-bind="css:{x: $parent.shouldApplyClass($data.tier(), false)}, text: title"></li>
        <li data-bind="css:{x: $parent.shouldApplyClass($data.tier(), true)}, text: tier"></li>
</div>

查看型号：

var ViewModel = function(){
    var self = this;
    self.items = ko.observableArray([
        {title: ko.observable("Title"), tier: ko.observable("Tier1")},
        {title: ko.observable("Title"), tier: ko.observable("Tier1")},
        {title: ko.observable("Title"), tier: ko.observable("Tier2")},
        {title: ko.observable("Title"), tier: ko.observable("Tier2")},
        {title: ko.observable("Title"), tier: ko.observable("Tier3")}
    ]);

    var lastTier;
    self.shouldApplyClass = function(tier, reset){
        if( tier != lastTier){
            if( reset){
                lastTier = tier;
            }
            return true;
        }
        return false;
    }
}
var vm = new ViewModel();
ko.applyBindings(vm);

看小提琴

于 2013-05-02T01:50:26.260 回答