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

Total Post:42

Posted on    May-26-2015 7:32 AM

 JavaScript Style  Knockout.js  list 

 1 Reply(s)
 722  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 }">



<script type="text/html" id="recentHeadlinesTemplate">

    <div class="even">




Norman Reedus
Norman Reedus

Total Post:45

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


        //update even rows




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