Knockout.js "if Binding" on multiple booleans

knockout.js knockout-2.0
Brad Bamford picture Brad Bamford · Mar 9, 2013 · Viewed 33.9k times · Source

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

Adam Kennedy picture Adam Kennedy · Mar 9, 2013

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

Related questions

How to Clear Contents of an observableArray That was Populated from Previous Visits to a View

I have a Single Page Application that uses knockout for the data binding. The CAApproval.html view in my single page application has an observeablearray named AllCertificates in the viewmodel code. It populates fine on the page. When you navigate …

Read More
Setting the id attribute with knockoutjs including a prefix

I'm using KnockoutJS to iterate over an object, like this: Now this all works. But the problem i have is that it sets the id of the button to just a number. So it looks like this: <button id="1"&…

Read More
Binding true / false to radio buttons in Knockout JS

In my view model I have a IsMale value that has the value true or false. In my UI I wish to bind it to the following radio buttons: <label>Male <input type="radio" name="IsMale" value="…

Read More