HOW TO ADD STRIPED STYLING TO A LIST OF ITEMS?

Elena Glibart

Total Post:42

Points:296
Posted by  Elena Glibart
 775  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. Norman Reedus

    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>

Answer

NEWSLETTER

Enter your email address here always to be updated. We promise not to spam!