Row visibility

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"></script>
<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"/>

CSS

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

JavaScript

var Vm = function(_rows) {
    var self = this;
    // filter condition on view model
    self.mustContain = ko.observable('a');
    // 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('a');
        // 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);