Knockout.jsの小ネタ

Knockout.jsでは通常、値をバインドしたい時は

<div data-bind="hoge">

このようにプロパティ名を指定します。

Knockout.jsには、とある条件の時にCSSクラスをバインドする機能があります。
例えばこんな感じに書きます。

<div data-bind="css: { css-no-class: foo() }">

このfooは、bool値を持つobservableだとします。

foo = ko.observable(true);

この時によくやってしまうのが

<div data-bind="css: { css-no-class: foo }">

fooが関数として実行されないというミス。
しかもJavaScriptは、この形でもtrueとして判断するので割と気づかない
falseにした時にあれれってなることが多いので注意が必要なのです。

訂正
コメントいただいて調べなおしたら上記はどうやら私の勘違いだったようです。

<div data-bind="css: { css-no-class: !foo }">

このパターンではうまく動かないと思っていたのですがちゃん動きました。
なんで動かなかったんだろう？？？

関数呼び出しをしなければいけないパターンは

<div data-bind="css: { css-no-class: count() < 10 }">

こんな感じで比較を行った場合でした。