Stosowanie klasy do pierwszej wartości w tablicy, gdy szablon foreach wiąże się z Knockout

Question

Próbuję znaleźć sposób zastosowania klasy css do pierwszego rekordu podczas wiązania tablicy za pomocą foreach w Knockout. Mój końcowy wynik musi wyglądać tak.

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

z szablonem, który powoduje:

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

jedyną opcją mogę wymyślić robi się afterRender i znalezienie pierwszego dziecka i robi addClass się przy użyciu jQuery. Czy są jakieś lepsze opcje?

UPDATE:

Zdaję sobie sprawę, że popełniłem błąd w moim przykładzie, że moje rzeczywiste dane jest nieco bardziej skomplikowana, więc o to, co moje szablony wyglądać następująco:

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

i tu jest co dane wygląda następująco:

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

Answer 1

W swojej tempalte, spróbuj:

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

Answer 2

Poprzednie rozwiązanie nie działa w moim przypadku. użyłem $ index == 0, aby zobaczyć, czy jest to pierwsze dziecko, ja wędruję jak dostać się do ostatniego potomka

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