Applicazione della classe al primo valore dell'array quando il modello foreach si associa con Knockout

Question

Sto cercando di trovare un modo per applicare una classe css al primo record quando si associa un array usando foreach in Knockout. Il mio risultato finale deve essere simile a questo.

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

con un modello che si traduce in:

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

L'unica opzione che posso venire con sta facendo un AfterRender e trovando il primo figlio e facendo l'addClass me stesso utilizzando jQuery. Ci sono delle opzioni migliori?

UPDATE:

mi rendo conto che ho fatto un errore nel mio esempio a che i miei dati reale è un po 'più complicato: ecco quali sono i miei modelli assomigliano:

<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> 

Ed è qui ciò che i dati appare come:

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

Answer 1

Nella tua tempalte, provare:

0.123.

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

Answer 2

La soluzione precedente non funziona nel mio caso. Ho usato $ indice == 0 per vedere se è il primo figlio, mi aggiro come ottenere l'ultimo figlio

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