Aplicación de la clase al primer valor en la matriz cuando se usa la plantilla foreach binding with Knockout

Question

Estoy tratando de encontrar una forma de aplicar una clase css al primer registro al vincular una matriz usando foreach en Knockout. Mi resultado final debe verse así.

var viewModel = function() { 
    this.records = ["A", "B", "C"] 
}; 

con una plantilla que se traduce en:

<tbody> 
    <tr> 
     <td class="special-class">A</a> 
     <td>A</a> 
     <td>A</a> 
    </tr> 
</tbody> 

La única opción que puedo llegar a está haciendo un afterRender y encontrar el primer hijo y haciendo el addClass mí mismo usando jQuery. ¿Hay mejores opciones?

ACTUALIZACIÓN:

realizo he cometido un error en mi ejemplo en que mis datos real es un poco más complicado por lo que aquí es lo que mis plantillas se parecen:

<div id="calendar"> 
    <table> 
     <thead> 
      <tr data-bind="template: {name: 'calendarHeadTemplate', foreach: days}"></tr> 
     </thead> 
     <tbody data-bind="template: {name: 'calendarTemplate', foreach: timeSlots}"></tbody> 
    </table> 
</div> 

<script id="calendarHeadTemplate" type="text/html"> 
    <th data-bind="text: $data"></th> 
</script> 

<script id="calendarTemplate" type="text/html"> 
    <tr data-bind="foreach: $data"> 
     <td data-bind="text: $data"></td> 
    </tr> 
</script> 

Y aquí está lo que los datos se parece a:

var viewModel = function() { 
    this.days = ["Thu 15", "Fri 16"]; 
    this.timeslots = [["1","2"],["3","4"]]; 
}; 

Answer 1

En su tempalte, intente:

<td data-bind="css: {'special-class' : $root.records[0] === $data}"></td> 

Answer 2

La solución anterior no funciona en mi caso. que utiliza el índice $ == 0 para ver si es el primer hijo, me pregunto a cómo conseguir el último hijo

<td data-bind="css: {'special-class' : $index() == 0}"></td>