ノックアウトでテンプレートforeachバインディングを使用する場合の配列の最初の値への適用

Question

ノックアウトでforeachを使用して配列をバインドするときに、最初のレコードにCSSクラスを適用する方法を探しています。私の最終的な結果は、このように見える必要があります。

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

私はafterRenderを行うと、最初の子を見つけて、自分がjQueryのを使用してaddClassをやっているを考え出すことができる唯一のオプション：その結果、テンプレートと

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

。より良い選択肢はありますか？

UPDATE：

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

そして、ここにある：私は私は私の実際のデータはので、ここでもう少し複雑であることに私の例ではミスを犯し実現

は私のテンプレートがどのように見えるかですデータがどのように見えるか：あなたtempalteで

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

Answer 1

、試してみてください。

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

Answer 2

私の場合、以前の解決策は機能しません。 は私が

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