当模板foreach与Knockout绑定时,将类应用于数组中的第一个值

Sha*_*lle 5 knockout.js

我正在尝试找到一种方法,在Knockout中使用foreach绑定数组时,将css类应用于第一条记录.我的最终结果需要看起来像这样.

var viewModel = function() {
   this.records = ["A", "B", "C"]
};
Run Code Online (Sandbox Code Playgroud)

使用模板导致:

<tbody>
   <tr>
      <td class="special-class">A</a>
      <td>A</a>
      <td>A</a>
   </tr>
</tbody>
Run Code Online (Sandbox Code Playgroud)

我能想到的唯一选择是做一个afterRender并找到第一个孩子并使用jQuery自己做addClass.还有更好的选择吗?

更新:

我意识到我在我的例子中犯了一个错误,因为我的实际数据有点复杂,所以这就是我的模板的样子:

<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>
Run Code Online (Sandbox Code Playgroud)

以下是数据的样子:

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

Mar*_*son 6

在你的tempalte,尝试:

<td data-bind="css: {'special-class' : $root.records[0] === $data}"></td>
Run Code Online (Sandbox Code Playgroud)