knockout.js - Is it possible to data-bind visible to the negation ("!") of a boolean ViewModel property?


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?

<tbody data-bind="foreach: periods">
      <i class="icon-search" data-bind="visible: !charted, click: $parent.pie_it"></i>
      <i class="icon-remove" data-bind="visible: charted, click: $parent.pie_it"></i>

My ViewModel has a property periods which is an array of month, like this:

var month = function() {
    this.charted = ko.observable(false);

All Answers
  • Translate

    When using an observable in an expression you need to access it as a function like:

    visible: !charted()

  • Translate

    I agree with John Papa's comment that there should be a built-in hidden binding. There are two benefits to a dedicated hidden binding:

    1. Simpler syntax, ie. hidden: charted instead of visible: !charted().
    2. Less resources, since Knockout can observe the observable charted directly, rather than creating a computed to observe !charted().

    It's simple enough to create a hidden binding, though, like this:

    ko.bindingHandlers.hidden = {
      update: function(element, valueAccessor) {
        ko.bindingHandlers.visible.update(element, function() {
          return !ko.utils.unwrapObservable(valueAccessor());

    You can use it just like the built-in visible binding:

    <i class="icon-search" data-bind="hidden: charted, click: $parent.pie_it"></i>
    <i class="icon-remove" data-bind="visible: charted, click: $parent.pie_it"></i>

  • Translate

    It's little confusing, as you have to do


    so, i did

    <span data-bind="visible:showMe">Show</span>
    <span data-bind="visible:!showMe()">Hide</span>
    <label><input type="checkbox" data-bind="checked:showMe"/>toggle</label>​

    my model is

    var myModel={

    ​ check in fiddle

  • Translate

    You could use my switch/case binding, which includes case.visible and casenot.visible.

    <tbody data-bind="foreach: periods">
            <td data-bind="switch: true">
            <i class="icon-search" data-bind="case.visible: $else, click: $parent.pie_it"></i>
            <i class="icon-remove" data-bind="case.visible: charted, click: $parent.pie_it"></i>

    You could also have it as

            <i class="icon-search" data-bind="casenot.visible: charted, click: $parent.pie_it"></i>
            <i class="icon-remove" data-bind="case.visible: $else, click: $parent.pie_it"></i>

  • Translate

    In order to make the binding aware of changes to the property, I copied the visible binding handler and inverted it:

    ko.bindingHandlers.hidden = {
        update: function (element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor());
            var isCurrentlyHidden = !( == "");
            if (value && !isCurrentlyHidden)
       = "none";
            else if ((!value) && isCurrentlyHidden)
       = "";

  • Translate

    Disclaimer: this solution is for entertainment purposes only.

    ko.extenders.not = function (target) {
        target.not = ko.computed(function () {
            return !target();
    }; = ko.observable(true).extend({ not: null });
    <div data-bind="text: foo"></div>     <!-- true -->
    <div data-bind="text: foo.not"></div> <!-- false -->
    <!-- unfortunately I can't think of a way to be able to use:
        text: foo...not

  • Translate

    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

    Now on your HTML you should do this

    <p data-bind = "visible:isSearchContentValid() === false"> Text 1</p>
    <p data-bind = "visible:isSearchContentValid"> Text 2</p>

    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.

  • Translate

    Also can use hidden like this:

     <div data-bind="hidden: isString">
                                <input type="text" class="form-control" data-bind="value: settingValue" />