CODEWITHSUNDEEP
bindingknockout.js
Oguz Karadenizli
Oguz Karadenizli

Reputation: 3505

How can I make conditional binding in knockout.js?

I tried this one :

<div data-bind="attr: {class: itemSelected? 'selected' : 'unselected' }"></div>

But it does not work :)

Upvotes: 14

Views: 26302

Answers (2)

ATHER
ATHER

Reputation: 3384

Following worked for me, i was using both css and id attributes, for me it did't work if css attribute is not the first one , so keep css attribute as your fist one. 

<div class="panel-collapse collapse" data-bind="css:{in:$index()==0}, attr: { id:'collapse'+$index()} ">

...
...
...

</div>

Upvotes: 0

kendaleiv
kendaleiv

Reputation: 5813

Assuming you have this:

function viewModel() {
    this.itemSelected = ko.observable(true);
}
ko.applyBindings(new viewModel());​

Add a () after itemSelected to get the current value of the observable that you can use with the ternary operator:

<div data-bind="attr: { class: itemSelected() ? 'selected' : 'unselected' }"></div>​

http://jsfiddle.net/RK7Ty/

If you didn't need to assign the unselected class for the non selected state you could do this instead:

<div data-bind="css: { selected: itemSelected }"></div>​

http://jsfiddle.net/RK7Ty/1/

Upvotes: 26

Related Questions