我需要使用knockout将tabindex设置为动态生成的控件。我在UI级别中对数据进行了数据绑定,但似乎无法正常工作。以下是数据绑定的HTML代码:
<tbody data-bind="foreach: Week1">
<tr class="formFields" style="vertical-align: top;">
<td class="formFields" width="8%" data-bind="text: Day">
</td>
<td class="formFields" width="5%" align="center">
<select class="combobox" data-bind="value:Required, attr:{tabindex: 42 + Date + $index()}" >
<option value="E">Eligible</option>
<option value="O">On</option>
<option value="F">Off</option>
</select>
</td>
<td class="formFields" width="10%" align="center" >
<input class="txtbox" type="text" placeholder="S:" data-bind="value:SetupTime, attr: { tabindex: 43 + Date + $index() }/>
<input class="txtbox" type="text" placeholder="R:" data-bind="value:CloseTime, attr: { tabindex: 44 + Date + $index() }" />
</td>
<td class="formFields" width="10%" align="center">
<input class="txtbox" type="text" placeholder="Min:" data-bind="value:MinHrsPerDay, attr: { title: tabindex: 45 + Date + $index() }"/>
<input class="txtbox" type="text" placeholder="Max:" data-bind="value:MaxHrsPerDay, attr: { title: tabindex: 46 + Date + $index() }"/>
</td>
<td class="formFields" width="6%" align="center">
<input class="txtbox" align="middle" type="text" data-bind="value:MinWorkShift, attr: { tabindex: 47 + Date + $index() }"/>
</td>
</tr>
</tbody>
此处Date是我的viewmodel的属性,表示天为0-6。由于可以有多行,我使用$ index()来计算每行中控件的选项卡索引。
但这是我在运行时看到的:
<input type="text" data-bind="value:SetupTime, attr: { tabindex: 43 + Date + $index() }" placeholder="S:" class="txtbox" tabindex="43function d(){if(0<arguments.length){if(!d.equalityComparer||!d.equalityComparer(c,arguments[0]))d.H(),c=arguments[0],d.G();return this}b.r.Wa(d);return c}2">
有人可以帮我纠正一下吗?
先谢谢
答案 0 :(得分:6)
由于您的Date
属性为ko.observable
,因此您需要通过将其作为函数调用来获取其值,因此使用Date()
。
因此您需要将绑定更改为:
data-bind="value:SetupTime, attr: { tabindex: 43 + Date() + $index() }"
如果您在Date()
之类的表达式中使用您的observable,则只需使用43 + Date() + $index()
调用它(请注意()
之后的$index
。)
如果你直接绑定到一个observable,那么你不需要()
中的data-bind="value:Required"
,因为在这种情况下,KO会自动为你解开这个值。