将条纹样式添加到项目列表答案

【问题标题】：Add striped styling to a list of items将条纹样式添加到项目列表
【发布时间】：2011-09-20 02:39:51
【问题描述】：

使用 KnockoutJS 对列表进行条带化的最佳方法是什么？下面 div 上的类应该是偶数或奇数，具体取决于它在列表中的位置，并在添加或删除项目时更新。

<div class="Headlines loader" 
     data-bind="css: { loader: headlines().length == 0 }, 
                       template: { name: 'recentHeadlinesTemplate',
                                   foreach: beforeHeadlineAddition, 
                                   beforeRemove: function(elem) { $(elem).slideUp() },
                                   afterAdd: slideDown }">
</div>

<script type="text/html" id="recentHeadlinesTemplate">
    <div class="even">
        ${Title}
    </div>  
</script>

【问题讨论】：

标签： knockout.js zebra-striping

【解决方案1】：

我发现了一个在使用 foreach 迭代时返回索引的函数，因此您可以以相当紧凑的方式应用偶数和奇数类，例如：

<tr data-bind="css: { 'even': ($index() % 2 == 0) }">

【讨论】：

$index 记录在绑定上下文中：link - 谢谢@wesc
这一直是我的首选方法，与接受的答案相比，我看不出它没有提供什么。
谢谢，我认为接受的答案早于我的答案，所以除非原始发布者对其进行评论，否则它将保持原样。不知道其他人是否可以改变这一点

【解决方案2】：

不久前在 KO 论坛上有一个主题：https://groups.google.com/d/topic/knockoutjs/cJ2_2QaIJdA/discussion

我的解决方案是自定义绑定。它有几个变体，但基本上看起来像：

ko.bindingHandlers.stripe = {
    update: function(element, valueAccessor, allBindingsAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor()); //creates the dependency
        var allBindings = allBindingsAccessor();
        var even = allBindings.evenClass;
        var odd = allBindings.oddClass;

        //update odd rows
        $(element).children(":nth-child(odd)").addClass(odd).removeClass(even);
        //update even rows
        $(element).children(":nth-child(even)").addClass(even).removeClass(odd);;
    }
}

并可以像这样使用：

<ul data-bind="template: { name: 'itemsTmpl', foreach: items }, stripe: items, evenClass: 'light', oddClass: 'dark'"></ul>

此处提供此绑定的 3 种变体示例：

http://jsfiddle.net/rniemeyer/HJ8zJ/

【讨论】：

我们如何确保在应用条纹之前完成模板渲染？或者这甚至是一个问题？
只需要在模板绑定之后加上stripe绑定就可以了。绑定确实从左到右运行，但史蒂夫说这不是他试图保证的事情。否则，小提琴中有一个名为templateWithStripe 的版本，它包装了模板绑定并绝对保证了顺序。它可能提供了最简洁的语法。
我看到了这个，但我希望有一个更简单的方法。我想我会选择这个。
这个解决方案确实有效，但我发现 ZiglioNZ 的答案更简单，而且效果相同。 stackoverflow.com/a/11005167/346561

【解决方案3】：

一个简单的方法是添加一个计算的 observable，它为每个元素添加一个索引，例如

    self.logLines = ko.observable(logLinesInput);

    self.enhancedLogLines = ko.computed(function() {
        var res = [];
        $.each(self.logLines(), function(index, ll) { 
             res.push(new LogLine(index, ll)); 
        });
        return res;
    }, self);

在我的例子中，LogLine() 创建了一个具有索引字段和原始对象中的其他字段的对象。

现在您可以轻松地将斑马条纹添加到您的输出中：

            <tr data-bind="css: { odd: (index % 2 == 1), even: (index % 2 == 0) }">

【讨论】：

【解决方案4】：

感谢您提供有用的帖子。我想提一下，css 可以很好地进行条带化，但嵌入的“if”似乎只在行渲染后才起作用。因此，使用 $index 或 css 奇/偶功能不会产生预期的结果。在不使用模板的情况下，我发现您可以将 KO 逻辑包装在行周围，以便在计算行之前发生逻辑。

<tbody data-bind="foreach: viewModel.configuration().items()"">
    <!-- ko if: $data.part() != '' -->
    <tr>
            <td data-bind="text: $index"></td><td  data-bind="text: $data.part()"></td>
    </tr>
    <!-- /ko -->
</tbody>

【讨论】：

【解决方案5】：

您可以使用模板内的{{if}}和{{else}}条件语句来设置div的类。

您还需要扩展您的视图模型以包含一个函数，该函数返回您当前项目的索引，它会告诉您它是奇数还是偶数。 (Something like this)

【讨论】：

这可能适用于静态列表，但如果我要删除和添加项目，那么我可以连续有两个偶数行或奇数行。
我认为当您从数组中添加/删除某些内容时，knockoutjs 会重新呈现整个模板

【解决方案6】：

这是一个完整的例子：

<ul class="pickupPointHours" data-bind="foreach: Items">
 <li data-bind="css: { lineEven: ($index()%2 === 0), lineOdd: ($index()%2 === 1)}">
  <span class="pickupPointDay" data-bind="text: TextProperty"></span>
 </li>
</ul>

【讨论】：