KO - 比较for循环中的两个项目？

Question

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

<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> 

还有一个其他要求。每当Tier变化时，我必须为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循环中，我必须访问前一个项目的层，并根据当前项目的层检查该值。

谢谢。

Answer 1

你可以直接在你的视图模型中调用一个函数。最简单的做法是从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); 

See the fiddle