title: Knockout JS css "else" conditons
body: <p>I would like to do this in Knockout.</p>
  
  <pre><code>    &lt;span class="badge" data-bind="text: rank, css: {'badge-success': firstPlace, 
          'badge-warning': !firstPlace}"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>Where my javascript model class has this method</p>
  
  <pre><code>    self.firstPlace = ko.computed(function() {
          return self.rank() == 1;
      });
  </code></pre>
  
  <p>This fails to produce the 'badge-warning' class. I tried a few invocation variations in the data-bind attribute such as <code>firstPlace == false</code> and <code>(!firstPlace)</code>. Instead I have to add a second inverse method to my model:</p>
  
  <pre><code>    &lt;span class="badge" data-bind="text: rank, css: {'badge-success': firstPlace, 
          'badge-warning': notFirstPlace}"&gt;&lt;/span&gt;
  
  
      // YUCK
      self.notFirstPlace = ko.computed(function() {
          return self.rank() != 1;
      });
  </code></pre>
  
  <p>Of course, this works. And hooray for Knockout JS which really is a lot of fun to use. But this just seems wrong. Anybody have a better method?</p>