How to add striped styling to a list of items?

Total Post:42

Points:296
 1121  View(s)
Ratings:
Rate this:

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>

  1. Post:45

    Points:315
    Re: How to add striped styling to a list of items?

     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>

      Modified On Apr-09-2018 11:33:08 PM

Answer