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?

<tbody data-bind="foreach: periods">
  <tr>
    <td>
      <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>
    </td>
  </tr>
</tbody>

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

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

@Niko: It's not really a duplicate question. The OP of the question you refer to already knew **that** it's possible to data-bind the negation of an observable, but wonders why it needs to be called like a function. This question's OP here didn't know how to do that in the first place and obviously didn't find that other question. I'm glad I found this question here - which is mostly thanks to its descriptive title. — Oliver, May 14 '13 at 11:32

score 287 · Accepted Answer · answered Apr 11 '12 at 21:58

287

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

visible: !charted()

answered Apr 11 '12 at 21:58

RP Niemeyer

114,592
18
291
211

34

Maybe we should make a hidden binding :) We have enable and disable. – John Papa Apr 11 '12 at 23:21
Does the documentation disagree with this, or am I completely misunderstanding this page: http://knockoutjs.com/documentation/css-binding.html – Jun 15 '13 at 20:17
Nevermind, I guess "isSevere" is not an observable but a plain old property, thus my confusion. – Jun 15 '13 at 20:19
4

When using !charted, you're getting ![Function]. [Function] is truthy, ![Function] becomes false and will always be false if you use that syntax. http://jsfiddle.net/datashaman/E58u2/3/ – datashaman Jan 28 '14 at 05:31
1

They actually added `hidden` binding in [v3.5.0](https://knockoutjs.com/documentation/visible-binding.html) – Grin Mar 26 '19 at 10:10

Dave · Answer 2 · 2013-10-30T04:57:32.377

53

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:

Simpler syntax, ie. hidden: charted instead of visible: !charted().
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>

edited Oct 30 '13 at 04:57

answered May 13 '12 at 17:35

Dave

631
4
5

9

this did not work for me without return `return !ko.utils.unwrapObservable(valueAccessor());` – Mehmet Ataş Mar 31 '13 at 17:31
Thanks @MehmetAtaş - I corrected the `hidden` binding per your comment. (BTW, I was using CoffeeScript in my project at the time I posted this originally. CoffeeScript's syntax doesn't make it obvious when a return is intentional.) – Dave Oct 30 '13 at 05:05

score 10 · Answer 3 · answered Jan 04 '13 at 17:29

It's little confusing, as you have to do

visible:!showMe()

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={
    showMe:ko.observable(true)
}
ko.applyBindings(myModel);

check in fiddle http://jsfiddle.net/khanSharp/bgdbm/

score 4 · Answer 4 · answered Aug 28 '12 at 20:40

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

<tbody data-bind="foreach: periods">
    <tr>
        <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>
        </td>
    </tr>
</tbody>

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>

I just realized that this is an old question but hope this could be useful to someone. — Michael Best, Aug 28 '12 at 20:44

score 1 · Answer 5 · answered Apr 14 '13 at 10:19

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 = !(element.style.display == "");
        if (value && !isCurrentlyHidden)
            element.style.display = "none";
        else if ((!value) && isCurrentlyHidden)
            element.style.display = "";
    }
};

score 0 · Answer 6 · answered Apr 17 '16 at 14:44

Disclaimer: this solution is for entertainment purposes only.

ko.extenders.not = function (target) {
    target.not = ko.computed(function () {
        return !target();
    });
};

self.foo = 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
-->

score 0 · Answer 7 · edited Dec 07 '18 at 19:37

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

<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.

score -1 · Answer 8 · answered May 31 '17 at 08:04

-1

Also can use hidden like this:

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

answered May 31 '17 at 08:04

Dev-Systematix

439
6
26

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

8 Answers8

Linked