computed observableArray does not update UI

Question

I have a main ko.observableArray and i have created three computed observable arrays from it and bound the three arrays to the UI. Code is

self.ActiveVisitsList = ko.observableArray();

self.FVL = ko.computed(function () {
    return ko.utils.arrayFilter(self.ActiveVisitsList(), function (o) {
        return o.CsrID == 0;
    });
}, self);

self.MVL = ko.computed(function () {
    return ko.utils.arrayFilter(self.ActiveVisitsList(), function (o) {
        return o.CsrID == self.Me().ID;
    });
}, self);

self.OVL = ko.computed(function ()
{
    return ko.utils.arrayFilter(self.ActiveVisitsList(), function (o) {
        return (o.CsrID != self.Me().ID && o.CsrID != 0);
    });
}, self);

After some time, an object inside the main observableArray "ActiveVisitorsList", its CsrID changes from 0 to some other value but the bound UIs don't reflect. Is there any way I can manually rebind the UI with models or something to make it work?

Thanks, Aadil.

Answer 1

If you define CsrID as observable knockout will automatically update UI. In this you have to modify your computed to this:

self.FVL = ko.computed(function () {
    return ko.utils.arrayFilter(self.ActiveVisitsList(), function (o) {
        return o.CsrID() == 0;
    });
}, self);

self.MVL = ko.computed(function () {
    return ko.utils.arrayFilter(self.ActiveVisitsList(), function (o) {
        return o.CsrID() == self.Me().ID;
    });
}, self);

self.OVL = ko.computed(function ()
{
    return ko.utils.arrayFilter(self.ActiveVisitsList(), function (o) {
        return (o.CsrID() != self.Me().ID && o.CsrID != 0);
    });
}, self);