Knockout JS: Computed observable failing to update

Question

I am having trouble getting my knockout text observable to update with a computed or pureComputed ko function.

<li data-bind="css: { active: route().page === 'login'}">
    <a href="#"><label data-bind="text: logOption"></label></a>
</li>

var vm = {
    route: params.route,
    logOption: ko.pureComputed(function() {
       return userFunctions.isLoggedIn(session.user) ? "Log-out" : "Log-in";
      })
   }
  return vm;

The binding is working, however it doesn't update when I log in or log out.

A previous knockout click binding would update whenever I clicked on the element, so I know that the userFunctions.isLoggedIn(sessions.user) does itself update properly depending on the log in / log out status.

I would like the text:logOption to update with "log in" or "log out" depending on the status, but it seems as if knockout is not observing the change in status of the userFunctions.isLoggedIn(sessions.user) within the computed variable?

ko.computed instead of pureComputed – Adam Wolski Mar 13 '17 at 09:23 — Adam Wolski, Mar 13 '17 at 09:23

score 1 · Accepted Answer · answered Mar 13 '17 at 08:23

Well, there are a lot of things wrong with your approach.

First off, it is not a client-side responsibility to handle login/logout. For this reason, it should not be a link, but a POSTed form from where you initiate the process.

About your particular question, it does not work because the value you make the logOption to rely on is not an observable. Knockout has no way of knowing that the value of something has changed unless it is an observable - in other words, computed observables don't not work like they poll the value every 0.x seconds or so to see if there was a change. How do you, then, expect it to realize there was a change in the value?

The solution therefore is that you must implement the logOption value so that it depends on an observable and change the value of it. This should be the solution in other, similar circumstances, but as far as login management is concerned, you should simply opt for a server-side solution.

Thanks, I'm not sure what you mean by handling it server side - I'm just trying to update the header text to reflect the logged in or logged out status. — SENA, Mar 13 '17 at 09:01
Sorry previous edit overtimed! .... the lack of observable makes sense! I'm trying to set a ko.obervable using the userFunctions.isLoggedIn(sessions.user) but until someone has logged in it is undefined which knockout doesn't seem to want to process ¯\_(ツ)_/¯ — SENA, Mar 13 '17 at 09:11

Knockout JS: Computed observable failing to update

1 Answers1