Knockout interception for foreach element not updating

Question

I use the click event on a button to set the value of an element generated using foreach .

 <table> <tbody data-bind="foreach: Employees"> <a data-bind="click:$parent.delete()"> .. 

in my delete function I set the value but it does not refresh the screen

  Delete :(emp) { emp.active=false; } 

When I create, I set all the individual properties as observable, but it looks like they are not in the foreach loop.

• Update

Employees are filtered out.

 var Employees=ko.computed(function() { return ko.utils.arrayFilter(AllEmployees(), function (empid) { return empid.ID == filter(); }); 

Answer 1

When you get / set observables, you need to call them like this:

 var val = obj.prop(); //Getter obj.prop(false); //Setter 

Another problem is that you use parentheses in click bindings. Remember that Knockout bindings are just javascript, so it will actually execute that expression when it binds.

You need to get rid of these brackets or emp will be undefined initially.

UPDATE:

I updated this jsFiddle to include three filtered lists, similar to what you showed above. You can see that using a filtered list using a calculated one has nothing to do with how the knockout handles the bindings , and the user interface is updated without problems.

http://jsfiddle.net/jwcarroll/ceRPK/

Answer 2

To establish an observable, you must call it (since observables are implemented as functions):

 emp.active(false); 

Your method simply overwrites the observable.

Answer 3

A knockout subscribes to an observable array, but not to every observable within that array. If you want to subscribe to individual properties, you need to subscribe manually using myObservable.subscribe ()

A knockout subscribes to an observable array, but not to every observable within that array. If you want to subscribe to individual properties, you need to subscribe manually using myObservable.subscribe ()

Edit

If you are trying to calculate how much you should calculate, you can do it like this:

 var allEmployees = ko.observableArray([my data goes here]); var Employees=ko.computed(function() { return ko.utils.arrayFilter(allEmployees(), function (emp) { return emp.active === true; }); }); 

This works if the active is not an observable property for all allEmployees (). If this is an observable simple change, so that -

 var allEmployees = ko.observableArray([my data goes here]); var Employees=ko.computed(function() { return ko.utils.arrayFilter(allEmployees(), function (emp) { return emp.active(); }); });