Alternating row colors if some are invisible

Question

I've got a table with rows generated by the foreach binding.

The only difference from the 'usual' KO tables is that for dynamic filtering of rows I'm using the visible binding on tr elements which is bound to a function that uses values of some observables to decide whether current row should be visible:

<table>
    <thead>
        ...
    </thead>
    <tbody data-bind="foreach: unfilteredItems">
        <tr data-bind="visible: $root.rowFilter($data)">
            ...
        </tr>
    </tbody>
</table>

I'm using this approach because it's a way much better in terms of performance than traditional manipulation with a collection the foreach is bound to and which results in constant inserting\removing of DOM nodes.

The only problem here is that there is no pure CSS solution for alternating the color of the rows. The tr nodes stay in the DOM and :nth-child() selector won't work properly when some trs aren't visible.

So, I'm forced to stick with the jQuery solution:

function stripeVisibleRows(tableElem) {
    var $visibleRows = $(tableElem).find('tr:visible');

    $visibleRows.filter(':odd').css('background-color', '#EEEAE7');
    $visibleRows.filter(':even').css('background-color', '#DED7D1');
};

But how can I call this function in Knockout exactly after execution of the visible bindings for all the rows when any of observables used by rowFilter triggers updating the visible bindings?

I've tried subscribeing to a fake computed depending on the rowFilter function:

self.rowFiltering = ko.computed(function () {
        return self.rowFilter();
    })
    .subscribe(function () {
        tableHelpers.stripeVisibleRows('.tbl');
    });

, writing a custom binding like this one:

// Stripes visible tr elements.
// Must be applied to a table element. 
// Must be bound to the same expression as used to change visibility of the tr elements.
ko.bindingHandlers.stripeVisibleRows = {
    update: function (element, valueAccessor) {
        // Read provided binding value to establish dependencies tracking
        ko.utils.unwrapObservable(valueAccessor());

        tableHelpers.stripeVisibleRows(element);
    },
    after: ['visible']
};

and its usage:

<table data-bind="stripeVisibleRows: $root.rowFilter()">
    <thead>
        ...
    </thead>
    <tbody data-bind="foreach: unfilteredItems">
        <tr data-bind="visible: $root.rowFilter($data)">
            ...
        </tr>
    </tbody>
</table>

but with both methods my jQuery striping function gets called before applying the visible bindings and, therefore, doesn't work properly.

Could someone advice how to achieve what I'm trying to do?
Maybe I even need to change the whole approach to filtering and striping rows, but it should be without inserting\removing DOM nodes and as clean and reusable as possible.

Answer 1

You can subscribe to changes of your rowFilter, then defer execution of the call to stripeVisibleRows to ensure knockout has updated everything using the setTimeout(...,0) pattern:

self.rowFilter.subscribe(function() {
    setTimeout(function() {
        tableHelpers.stripeVisibleRows('.tbl');
    }, 0);
});

---

For situations where you don't mind elements being removed/added from the DOM, you can use the if binding instead of visible - this removes the markup entirely from the DOM, rather than just hiding it:

<table>
    <thead>
        ...
    </thead>
    <tbody data-bind="foreach: unfilteredItems">
        <tr data-bind="if: $root.rowFilter($data)">
            ...
        </tr>
    </tbody>
</table>

Answer 2

You kind of have to do everything behind the scenes and just expose it through functions. The striping can be done with CSS classes, so you don't need to worry about using jQuery.

Since the data items don't change, they're just a non-observable array. Behind the scenes, we have a computed based on rowFilter, which accesses some observable. The foreach calls functions that look at the item in the computed that corresponds to the current item, to set visibility and class.

In this example, you're filtering the elements by their number of letters.

var tracker;

vm = {
  letters: ko.observable(3),
  unfilteredItems: ['One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten'],
  visible: function(idx) {
    return tracker()[idx].visible;
  },
  odd: function(idx) {
    return tracker()[idx].odd;
  }
};

function rowFilter(item) {
  return item.length === vm.letters();
}

tracker = ko.pureComputed(function() {
  var visibleCount = 0;
  var result = ko.utils.arrayMap(vm.unfilteredItems, function(item) {
    var visible = rowFilter(item);
    if (visible) ++visibleCount;
    return {
      visible: visible,
      odd: visibleCount % 2
    };
  });
  return result;
});

ko.applyBindings(vm);

tr {
  background-color: lightgreen;
}
tr.odd {
  background-color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select data-bind="value:letters, options:[3,4,5]"></select>
<table border="1">
  <tbody data-bind="foreach: unfilteredItems">
    <tr data-bind="visible: $root.visible($index()) , css: {odd:$root.odd($index())} ">
      <td data-bind="text:$data"></td>
    </tr>
  </tbody>
</table>

Answer 3

Rather than calculating all the row stripes once the table has been rendered (ie: with stripeVisibleRows) I would instead pass the current loop $index to a separate $root function, and let it determine what the current stripe is for that index. For example:

Html:

<style>
  .On { background-color: #CCC }
  .Off { background-color: #FFF }
</style>

<table id='test'>
    <thead>
        ...
    </thead>
    <tbody data-bind="foreach: unfilteredItems">
        <tr data-bind="visible: IsVisible, css: $root.rowColour($index)">
            <td data-bind='text: Text'></td>
        </tr>
    </tbody>
</table>

Javascript:

var vmItem = function(visible, text) {
    this.IsVisible = visible;
  this.Text = text;
}

var vm = {
    unfilteredItems: [
        new vmItem(true, "Some"),
        new vmItem(true, "Data"),
        new vmItem(false, "Not Shown"),
        new vmItem(true, "Shown"),
        new vmItem(true, "To"),
        new vmItem(false, "Blah!"),
        new vmItem(true, "The User")
    ],
    rowColour: function(index) {
    var toggle = true;
        for(var c = 0; c < index(); c++) {
      // if the row at this index is visible, flip the row toggle
      if (this.unfilteredItems[c].IsVisible) toggle = !toggle;
    }
    return toggle ? "On" : "Off";
    }
};

ko.applyBindings(vm, $('#test')[0]);

Example CodePen

Answer 4

Using the @JamesThorpe's suggestion about setTimeout(...,0) pattern, I've managed to get the custom binding from my question to work properly:

// Stripes visible tr elements.
// Must be applied to a table element. 
// Must be bound to the same expression as used to change visibility of the tr elements.
ko.bindingHandlers.stripeVisibleRows = {
    update: function (element, valueAccessor) {
        // Read provided binding value to establish dependencies tracking
        ko.utils.unwrapObservable(valueAccessor());

        setTimeout(function () {
            tableHelpers.stripeVisibleRows(element);
        }, 0);
    }
};

function stripeVisibleRows(tableElem) {
    var $visibleRows = $(tableElem).find('tr:visible');

    $visibleRows.filter(':odd').css('background-color', '#EEEAE7');
    $visibleRows.filter(':even').css('background-color', '#DED7D1');
};

I use this binding like so:

<table data-bind="stripeVisibleRows: $root.rowFilter()">
    <thead>
        ...
    </thead>
    <tbody data-bind="foreach: unfilteredItems">
        <tr data-bind="visible: $root.rowFilter($data)">
            ...
        </tr>
    </tbody>
</table>

This is the best solution in terms of performance and reusability I've got so far to dynamically filter a table and alternate colors of its rows.

Just remember 2 things:

1. You must bind the stripeVisibleRows binding to the same expression as you use for the trs visibility binding to keep filtering and alternating in sync. The only difference between them is that you don't pass the $data in the stripeVisibleRows binding expression.
2. In the current implementation, you must apply the stripeVisibleRows binding to the table element.

Answer 5

To implement a full knockout solution you'd need to expose both the visibility and the striping in the rows themselves, and have them calculated in the viewmodel.

Remember that javascript is dynamic, so you can easyly add new properties to the rows.

As you don't show your viewmodel, I'll explain how you can do it, and include a sample view model which does this:

1. take each row, and add an observable, or computed observable (depends on your viewmodel) to control the row visibility, like this: row.visible = ko.computed(function() { /*your code here*/});
2. in each row, add an observable for striping, like this: row.visible = ko.observable(/*your initial value*/);
3. create a function that updates the striping for each row
4. subscribe a new function to each row visible observable, and use it to update the striping in each row

NOTE: To avoid using loops for your calculations, you can use a library like lodash which simplifies array/collection manipulation.

You can see this solution working in this fiddle;

HTML:

<ul data-bind="foreach: rows">
    <li data-bind="text: val(), visible: visible, attr:{class: striping}">
    </li>
</ul>
Show only rows that contain:
<input type="text" data-bind="value: mustContain"/>       

Javascript (it uses lodash. See note at the bottom):

var Vm = function(_rows) {
    var self = this;
    // filter condition on view model
    self.mustContain = ko.observable('');
    // rows array
    self.rows = _rows;
    // this will update striping
    var updateStriping = function() {
        var visibleRows = _.filter(rows,function(r) {
            return r.visible();
        });
        _.forEach(visibleRows, function(r,i) {
            r.striping(i % 2 ? 'odd' : 'even');
        });
    };
    _.forEach(self.rows, function(row) {
        // make observable version of value
        row.val = ko.observable(row.value);
        // add visibility to each row
        row.visible = ko.computed(function() {
            return row.val().match(self.mustContain());
        });
        // add striping to each row
        row.striping = ko.observable('');
        // subscribe visible change
        row.visible.subscribe(updateStriping);
    });
    updateStriping();
    return self;
};

var  rows = [
    { value: 'alpha' },
    { value: 'beta' },
    { value: 'gamma' },
    { value: 'delta' },
    { value: 'epsilon' },
    { value: 'zeta' },
    { value: 'eta' },
    { value: 'theta' },
    { value: 'iota' },
    { value: 'kappa' },
    { value: 'lambda' },
    { value: 'mu' },
    { value: 'nu' },
    { value: 'xi' },
    { value: 'omicron' },
    { value: 'pi' },
    { value: 'ro' },
    { value: 'sigma' },
    { value: 'tau' },
    { value: 'upsilon' },
    { value: 'phi' },
    { value: 'chi' },
    { value: 'psi' },
    { value: 'omega' }];

var vm = new Vm(rows);

ko.applyBindings(vm);

And CSS:

.odd { background-color: silver; }
.even {}

NOTE: This code is using the attr binding for setting the striping class. You'd normaly use css instead.

NOTE on lodash and EcmaScript 5 (thank you to Alexander Abakumov's comment): most modern browsers support ES5, and it offers some of the same functionalities of lodash. In this case you can remove lodash, and change the code in this way, using the native filter and forEach:

            var visibleRows = _.filter(rows,function(r) { // Line 9
            var visibleRows = rows.filter(function(r) {

        _.forEach(visibleRows, function(r,i) { // Line 12
        visibleRows.forEach(function(r,i) {

    _.forEach(self.rows, function(row) { // Line 16
    self.rows.forEach(function(row) {

This is the fiddle with theses changes.