Wednesday, 2 October 2013

knockout js css multiple class bindings

knockout js css multiple class bindings

I am making a small app for countdown timer in which i have used knockout
css binding with multiple classes. Now, the problem is if i am writing the
logic in separate handler it is working fine but if trying to implement
the same logic inline with css binding its not working as required.
Working version: 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>
Not working version: 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>
It seems like in inline css binding if condition is true then its applying
the class but when checking next statement which is false it removes the
class added in previous step. Is there any workaround for this inline css
check because lots of switch statements are not looking good in the
working code.

No comments:

Post a Comment