Question

I have a gridview which I want to zebra stripe after it has been bound and updated from a UpdateFromJS call.

The template is using a foreach databind, but I dont want to stripe it on the AfterRender event because it will get called on each row.

I need it to fire on the render of the whole grid.

Answer 1

Here is a thread with a description about how I tried to handle this in the past: https://groups.google.com/d/topic/knockoutjs/cJ2_2QaIJdA/discussion

Basically, we add a binding to do the striping. The binding would be specified after the template binding like:

<ul data-bind="template: { name: 'itemsTmpl', foreach: items }, stripe: items, evenClass: 'light', oddClass: 'dark'"></ul>

The binding could look something like this:

//separate options in binding
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);;
    }
}

Here is a sample with this binding and two other similar alternatives: http://jsfiddle.net/rniemeyer/HJ8zJ/. One passes the options directly into the stripe binding and another wraps the template binding, so you can just specify a single binding.