Question

In my viewmodel, I have defined:
self.myAreasEditMode = ko.observable(false);

In my html, I have:

<div>
  editing: <span data-bind="text: myAreasEditMode"></span><span data-bind="visible: myAreasEditMode">show me</span>
  <br />                  
  not editing (done): <span data-bind="text: (myAreasEditMode == false)"></span><span data-bind="visible: (myAreasEditMode == false)">show me</span>
</div>

And the output is:

editing: false
not editing (done)?: false 

Is Knockout manipulating my boolean, or is truthiness confusing me? I can’t figure out why (myAreasEditMode == false) returns false, when myAreasEditMode is in fact false.

Answer 1

Because myAreasEdit is a function and binding (myAresEdit == false) is checking if the Funciton is equal to false (which is not true — a Funciton != false) rather than the value of the function.

The markup should be:

data-bind="text: (myAreasEditMode() == false)"