How to add striped styling to a list of items?

I’m want to striped styling to a list of items with knockoutjs. The class on the div below should be even or odd depending where it is in the list.

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

Last updated:5/26/2015 7:54:40 AM

1 Answers

Norman Reedus
Norman Reedus

 Try this code

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);;
    }
}

and be used like:

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

Answer