More than 5 years have passed since last update.

knockoutJSのifバインディングの罠

Last updated at 2018-03-11Posted at 2018-03-09

はじめに

とあるhtml5 + knockoutJSでつくられているシステム開発中、knockoutJSのifバインディングではまった。
※検証に用いたKnockout.jsのバージョンは 3.4.2 です。

公式ドキュメントのifバインディングを見て、一番単純な記法だとこんな感じ。

index.html

いつも見えてるやつだぜ！
<div data-bind="if: property.aTrueValue">
 ifバインディングの評価値がtrueだったらでるぜ！
</div>

test.js

ko.applyBindings({
    property: { 
        aTrueValue:ko.observable(true)
    }
});

ふるまい

aTrueValueがtrue	aTrueValueがfalse	aTrueValueが存在しない
text表示	text非表示	text非表示

aTrueValueが無かったり、falseだったりするとちゃんとfalseとして評価される。ふんふん。

observableのオブジェクトでifバインディングの評価をするときほん編の通り想定通りの動きをしてくれるが、observable引数無の実体の値でifバインディングを使うと少し変な動きになる。

index.html

いつも見えてるやつだぜ！
<div data-bind="if: property.aTrueValue()">
 ifバインディングの評価値がtrueだったらでるぜ！
</div>

test.js

ko.applyBindings({
    property: { 
        aTrueValue:ko.observable(true)
    }
});

ふるまい

aTrueValueがtrue	aTrueValueがfalse	aTrueValueが存在しない
text表示	text非表示	text表示
~~存在しないのにifバインディングの評価がtrueに。。。~~
(2018/3/11 追記）ifバインディングはプロパティの有無まではbooleanで判定してくれるが、存在しない関数はエラーとなり、結果DOMが生成されてしまう！！

複数のobservableオブジェクトでifバインディングの評価をするとへんてこになる。

index.html

いつも見えてるやつだぜ！
<div data-bind="if: (property.aTrueValue && property.anotherTrueValue)">
 ifバインディングの評価値がtrueだったらでるぜ！
</div>

test.js

ko.applyBindings({
    property: { 
        aTrueValue:ko.observable(true), 
        anotherTrueValue:ko.observable(true)
    }
});

ふるまい

---	aTrueValueがtrue	aTrueValueがfalse	aTrueValueが存在しない
anotherTrueValueがtrue	text表示	text表示	text非表示
anotherTrueValueがfalse	text非表示	text非表示	text非表示
anotherTrueValueが存在しない	text非表示	text非表示	text非表示
~~条件式の頭がfalseなのにifバインディングの評価がtrue。~~
(2018/3/11 追記）javascriptの論理式について盛大に勘違いしてました。functionはtrue評価されてしまうので、後方のプロパティでifバインディングが効く模様。でもプロパティが存在しない場合はfalseになる。なかなか複雑。。。

複数のobservableオブジェクトの中身で評価してみる。

index.html

いつも見えてるやつだぜ！
<div data-bind="if: (property.aTrueValue() && property.anotherTrueValue())">
 ifバインディングの評価値がtrueだったらでるぜ！
</div>

test.js

ko.applyBindings({
    property: { 
        aTrueValue:ko.observable(true), 
        anotherTrueValue:ko.observable(true)
    }
});

ふるまい

---	aTrueValueがtrue	aTrueValueがfalse	aTrueValueが存在しない
anotherTrueValueがtrue	text表示	text非表示	text表示
anotherTrueValueがfalse	text非表示	text非表示	text表示
anotherTrueValueが存在しない	text表示	text非表示	text表示

~~条件式の頭が存在しないと、trueなんだね！すっごーい！~~
(2018/3/11 追記）①と同様、存在しない関数はエラーとなるのと、ショートサーキット評価で上記仕様になっているみたい。

ifバインディングを使う場合は
条件式のプロパティを定義したうえでobservableの中身で評価する
を守らないと想定通り動かなさそう。