knockout js css multiple class bindings

Question

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.

Answer 1

I just needed this today, I prefer the multiple CSS class binding noted on the docs.

You can set multiple CSS classes at once. For example, if your view model has a property called isSevere.

<div data-bind="css: { profitWarning: currentProfit() < 0, majorHighlight: isSevere }">

You can even set multiple CSS classes based on the same condition by wrapping the names in quotes like:

<div data-bind="css: { profitWarning: currentProfit() < 0, 'major highlight': isSevere }">

Answer 2

You can use a computed function to get the CSS. Something like this:

html:

<div class="upperTensClock" data-bind="css: upperTenCSS()"></div>

Javascript:

self.upperTenCSS = ko.computed(function() {
    switch(self.tens()) {
        case 0:
            return 'l1 l2 l3';
        case 1:
            return 'l3';
        case 2:
        case 3:
            return 'l2 l3 l7';
        case 4:
            return 'l1 l3 l7';
        case 5:
        case 6:
            return 'l1 l2 l7';
        case 7:                
            return 'l2 l3';
        case 8:
        case 9:
            return 'l1 l2 l3 l7';
    }
});