knockout.jsで条件付きバインディングを作成するにはどうすればよいですか？

Question

私はこの1つ試してみました：

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

をしかし、それは動作しません:)

Answer 1

あなたがこれを持っていると仮定：

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

の現在の値を取得するためにitemSelected後に（）を追加します。あなたが三項演算子で使用できることがわかります：

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

http://jsfiddle.net/RK7Ty/

---

あなたが代わりにこれを行うことが非選択状態のために選択されていないクラスを割り当てる必要がなかった場合：

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

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

Answer 2

私のために働いた後、私はcssとid属性の両方を使用していましたが、css属性が最初のものでなければそれは機能しませんでしたので、css属性を最初のものとして保持してください。

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

... 
... 
... 

</div>