複数のクラスでノックアウトCSSバインディングを使用したカウントダウンタイマー用の小さなアプリを作成しています。ここで、問題は、別のハンドラーでロジックを記述している場合は正常に動作しますが、CSS バインディングを使用してインラインで同じロジックを実装しようとすると、必要に応じて動作しないことです。
作業バージョン: http://jsfiddle.net/gzejF/3/
<div class="dateTimer" data-bind="timer: startTime, timerOptions: {speed: 1000}">
<div class="tens">
<div class="upperTensClock timerLine"></div>
<div class="lowerTensClock timerLine"></div>
</div>
<div class="units">
<div class="upperClock timerLine"></div>
<div class="lowerClock timerLine"></div>
</div>
</div>
動作しないバージョン: http://jsfiddle.net/K6m93/
<div class="dateTimer">
<div class="tens">
<div class="upperTensClock" data-bind="css: {
'l1 l2 l3': tens() == 0,
'l3': tens() == 1,
'l2 l3 l7': tens() == 2 || tens() == 3,
'l1 l3 l7': tens() == 4,
'l1 l2 l7': tens() == 5 || tens() == 6,
'l2 l3': tens() == 7,
'l1 l2 l3 l7': tens() == 8 || tens() == 9
}"></div>
<div class="lowerTensClock" data-bind="css: {
'l4 l5 l6': tens() == 0 || tens() == 6 || tens() == 8,
'l4': tens() == 1 || tens() == 4 || tens() == 7 || tens() == 9,
'l5 l6': tens() == 2,
'l4 l5': tens() == 3 || tens() == 5
}"></div>
</div>
<div class="units">
<div class="upperClock l1 l2 l3 l7" data-bind="css: {
'l1 l2 l3': units() == 0,
'l3': units() == 1,
'l2 l3 l7': units() == 2 || units() == 3,
'l1 l3 l7': units() == 4,
'l1 l2 l7': units() == 5 || units() == 6,
'l2 l3': units() == 7,
'l1 l2 l3 l7': units() == 8 || units() == 9
}"></div>
<div class="lowerClock l4 l5 l6" data-bind="css: {
'l4 l5 l6': units() == 0 || units() == 6 || units() == 8,
'l4': units() == 1 || units() == 4 || units() == 7 || units() == 9,
'l5 l6': units() == 2,
'l4 l5': units() == 3 || units() == 5
}"></div>
</div>
</div>
条件が true の場合、インライン css バインディングのように見えますが、クラスを適用しますが、false である次のステートメントをチェックすると、前のステップで追加されたクラスが削除されます。多くの switch ステートメントが作業コードで見栄えがよくないため、このインライン css チェックの回避策はありますか。