title: knockout js css multiple class bindings
body: <p>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. </p>
  
  <p>Working version: <a href="http://jsfiddle.net/gzejF/3/" rel="noreferrer">http://jsfiddle.net/gzejF/3/</a></p>
  
  <pre><code>&lt;div class="dateTimer" data-bind="timer: startTime, timerOptions: {speed: 1000}"&gt;
      &lt;div class="tens"&gt;
          &lt;div class="upperTensClock timerLine"&gt;&lt;/div&gt;
          &lt;div class="lowerTensClock timerLine"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="units"&gt;
          &lt;div class="upperClock timerLine"&gt;&lt;/div&gt;
          &lt;div class="lowerClock timerLine"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Not working version: <a href="http://jsfiddle.net/K6m93/" rel="noreferrer">http://jsfiddle.net/K6m93/</a></p>
  
  <pre><code>&lt;div class="dateTimer"&gt;
      &lt;div class="tens"&gt;
          &lt;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 
              }"&gt;&lt;/div&gt;
  
          &lt;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
              }"&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;div class="units"&gt;
           &lt;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 
              }"&gt;&lt;/div&gt;
  
          &lt;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
              }"&gt;&lt;/div&gt;
  
  
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>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.</p>