我正在尝试找到一种方法,在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)
在你的tempalte,尝试:
<td data-bind="css: {'special-class' : $root.records[0] === $data}"></td>
Run Code Online (Sandbox Code Playgroud)
归档时间: |
|
查看次数: |
3104 次 |
最近记录: |