title: Applying class to first value in array when template foreach binding with Knockout
body: <p>I'm trying to find a way to apply a css class to the first record when binding an array using foreach in Knockout.  My end result needs to look like this.</p>
  
  <pre><code>var viewModel = function() {
     this.records = ["A", "B", "C"]
  };
  </code></pre>
  
  <p>with a template that results in:</p>
  
  <pre><code>&lt;tbody&gt;
     &lt;tr&gt;
        &lt;td class="special-class"&gt;A&lt;/a&gt;
        &lt;td&gt;A&lt;/a&gt;
        &lt;td&gt;A&lt;/a&gt;
     &lt;/tr&gt;
  &lt;/tbody&gt;
  </code></pre>
  
  <p>The only option I can come up with is doing an afterRender and finding the first child and doing the addClass myself using jQuery.  Are there any better options?</p>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I realize I made a mistake in my example in that my actual data is a bit more complicated  so here  is what my templates look like:</p>
  
  <pre><code>&lt;div id="calendar"&gt;
      &lt;table&gt;
          &lt;thead&gt;
              &lt;tr data-bind="template: {name: 'calendarHeadTemplate', foreach: days}"&gt;&lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody data-bind="template: {name: 'calendarTemplate', foreach: timeSlots}"&gt;&lt;/tbody&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;script id="calendarHeadTemplate" type="text/html"&gt;
      &lt;th data-bind="text: $data"&gt;&lt;/th&gt;
  &lt;/script&gt;
  
  &lt;script id="calendarTemplate" type="text/html"&gt;
      &lt;tr data-bind="foreach: $data"&gt;
          &lt;td data-bind="text: $data"&gt;&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>And here is what the data looks like:</p>
  
  <pre><code>var viewModel = function() {
    this.days = ["Thu 15", "Fri 16"];
    this.timeslots = [["1","2"],["3","4"]];
  };
  </code></pre>