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

时间:2013-05-02 00:54:22

标签: 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>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循环中,我必须访问上一个项目的层,并根据当前项目的层检查该值。

感谢。

1 个答案:

答案 0 :(得分: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);

See the fiddle