Home > DeveloperSection > Forums > How to add striped styling to a list of items?
Elena Glibart
Elena Glibart

Total Post:35

Points:128
Posted on    May-26-2015 7:32 AM

 JavaScript Style  Knockout.js  list 
Ratings:


 1 Reply(s)
 478  View(s)
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>



Norman Reedus
Norman Reedus

Total Post:45

Points:315
Posted on    May-26-2015 7:54 AM

 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>


Don't want to miss updates? Please click the below button!

Follow MindStick