Knockout.js “if Binding” on multiple booleans

Question

Is it possible to use Knockout's if binding on more than one boolean?

Such as

<div data-bind="if: (property.aTrueValue && property.anotherTrueValue)">...

I've tried a lot of different syntax, but can't seem to find the right syntax. I'm not sure it's even possible.

Answer 1

You can - the if binding just takes an arbitrary expression. When doing more than just referencing the value of an observable like that, you'll need to actually call the observable like so:

<div data-bind="if: (property.aTrueValue() && property.anotherTrueValue())">...

Here's a working jsfiddle.

Answer 2

When Knockout processes your bindings it first evaluates your expression.

If the expression results in an observable, it then evaluates the observable as a convenience to get the final value that the if: works on.

So the two following work identically

<div data-bind="if: foo"></div>
<div data-bind="if: foo()"></div>

Once you leave the world of simple expressions ending in an observable, you probably also want to leave the sugar behind and always evaluate the observables yourself (for sanity if nothing else).

Try the following

<div data-bind="if: (property.aTrueValue() && property.anotherTrueValue())">...