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

Question

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

Answer 1

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

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

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