Is it possible to data-bind visible to the negation (“!”) of a boolean ViewModel property?

Question

I\'d like to use a property on my ViewModel to toggle which icon to display without creating a separate computed property of the inverse. Is this possible?

Answer 1

I was having the same issue about how to use an opposite of a boolean observable. I have found an easy solution:

var ViewModel = function () {
var self = this;

// When program start, this is set to FALSE
self.isSearchContentValid = ko.observable(false);


self.gatherPlacesData = function () {

   // When user click a button, the value become TRUE
   self.isSearchContentValid(true);

};

Now on your HTML you should do this

 Text 1
 Text 2

When the program starts only "Text1" is visible because "false===false is TRUE" and Text2 is not visible.

Lets say we have a button which invokes the gatherPlacesData on click event. Now Text1 won't be visible because "true === false is FALSE" and Text 2 only be visible.

Another possible solution could be using computed observable but, I think is a overcomplicated solution for a so simple problem.