Question

我正在使用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循环中，我必须访问上一个项目的层，并根据当前项目的层检查该值。

感谢。

Answer 1

您可以直接在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

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

1 个答案: