Настройка TabIndex в нокауте

Question

Мне нужно установить tabindex для динамически генерируемых элементов управления с помощью нокаута. Я связываю атрибуты на уровне пользовательского интерфейса, но, похоже, это не работает. Ниже приведен 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&lt;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">

Может ли кто-нибудь помочь мне исправить это?

Заранее спасибо

Answer 1

Потому что ваш Date собственность ko.observable так что вам нужно получить его значение, вызвав его как функцию, так что с Date(),

Так что вам нужно изменить привязки на:

data-bind="value:SetupTime, attr: {  tabindex: 43 + Date() + $index() }" 

Вам нужно только позвонить с Date() если вы используете свой наблюдаемый внутри выражения, как 43 + Date() + $index() (Обратите внимание () также после $index.)

Если вы непосредственно привязаны к наблюдаемой, то вам не нужно () как в data-bind="value:Required"потому что в этом случае KO автоматически "развернет" значение для вас.