Proper Dependecy Tracking In A Custom Binding

What I'm trying to achieve is to visually filter table rows generated by the foreach binding in a way that tr elements of the rows that are filtered out would be hidden instead of

Solution 1:

You can use a visible binding on the tr and bind it to the result of a function call using $data as the parameter. A little demo below. Whichever value you select is filtered out of the table.

var vm = {
  rows: ko.observableArray(['One', 'Two', 'Three']),
  selected: ko.observable('One'),
  isVisible: function(row) {
    return row !== vm.selected();
  }
};

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<select data-bind="options:rows, value:selected"></select>
<table border="1" data-bind="foreach:rows">
  <tr data-bind="visible:$parent.isVisible($data)">
    <td data-bind="text:$data"></td>
  </tr>
</table>