Knockout.js KO-比较for循环中的两个项目?
我正在使用knockout显示数据列表。这个很好用Knockout.js KO-比较for循环中的两个项目?,knockout.js,Knockout.js,我正在使用knockout显示数据列表。这个很好用 <ul> <li>Title</li><li>Tier1</li> <li>Title</li><li>Tier1</li> <li>Title</li><li>Tier1</li> <li>Title</li><li>Ti
<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>
- 标题第1层
- 标题第1层
- 标题第1层
- 标题第二层
- 标题第二层
- 标题第二层
还有一个要求。每当层发生变化时,我必须向li添加一个额外的类(仅针对第一行)
标题第1层
- 标题第1层
- 标题第1层
标题第二层
- 标题第二层
- 标题第二层
在高雄这可能吗?在for循环中,我必须访问上一个项目的层,并对照当前项目的层检查该值
谢谢。您可以直接在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);
这是如何生成的?您的视图模型/视图是什么样子的?经典级别检查:-)
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);