How to add striped styling to a list of items?

Total Post:42


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

  1. 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
            //update even rows

    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


Please check, If you want to make this post sponsored

You are not a Sponsored Member. Click Here to Subscribe the Membership.