Search code examples
knockout.jsknockout-2.0

Knockout.js "if Binding" on multiple booleans

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.

Solution

  • 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())">...