Come posso creare un bind condizionale in knockout.js?

Question

Ho provato questo:

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

Ma non funziona :)

Answer 1

Supponendo di avere questo:

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

Aggiungere un() dopo itemSelected per ottenere il valore corrente della osservabile che è possibile utilizzare con l'operatore ternario:

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

http://jsfiddle.net/RK7Ty/

---

Se non è stato necessario assegnare la classe selezionata per lo stato non selezionato si poteva fare questo, invece:

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

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

Answer 2

In seguito ha lavorato per me, Stavo usando entrambi gli attributi css e id, per me non funzionava se l'attributo css non è il primo, quindi tieni l'attributo css come il tuo primo.

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

... 
... 
... 

</div>