title: Knockout: Change css class based on value of observable
body: <p>I use foreach on an observable array:</p>
  
  <pre><code>&lt;div id="mainRight" data-bind="foreach: notifications"&gt;
      &lt;div class="statusRow"&gt;
          &lt;div class="leftStatusCell"&gt;
              &lt;div class="leftStatusCellColor" data-bind="css: availabilityCssClass($data.availability)"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="topRightStatusCell" data-bind="text: sip"&gt;&lt;/div&gt;
          &lt;div class="bottomtRightStatusCell ellipsisSingleline" data-bind="text: note"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt; &lt;!== end mainRight ==&gt;
  </code></pre>
  
  <p>As you can see, I pass the current value of availability to the function availabilityCssClass, which compares the value to some predefined strings. Depending on the matching string, it returns a class name.</p>
  
  <pre><code>self.availabilityCssClass = ko.computed(function (value) {
      var availability = value;
      if (availability === "Busy" || "DoNotDisturb" || "BeRightBack")
          return "leftStatusCellColorOrange";
      else if (availability === "Away" || "Offline")
          return "leftStatusCellColorRed";
      else
          return "leftStatusCellColorGreen";
  });
  </code></pre>
  
  <p>This is my model. The data comes from an external data source.</p>
  
  <pre><code>function Notification(root, sip, availability, note) {
      var self = this;
  
      self.sip = ko.observable(sip);
      self.availability = ko.observable(availability);
      self.note = ko.observable(note);
  };
  
  self.notifications = ko.observableArray();
  </code></pre>
  
  <p>However, it doesnt work as is. When the computed function is not commented out, the foreach does not iterate over the data and the div is empty. But I can see that the viewModel is not empty.</p>