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);

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