knockout.js - 读取 Knockout.js 中未提交的输入进入处理程序

Question

我有一个使用 Knockout.js 的表单，其中可以输入值，然后单击按钮或按 Enter 键将值应用到当前虚拟机。

当我在按 Enter 之前单击输入字段的按钮或 Tab 时，一切正常，但如果我按 Enter 而不按 Tab 离开输入字段，我将读取过时的值(或者如果字段没有值，则没有值)但失去了焦点)。

        self.triggerApplyInputByEnter = function (data, event) {
            if (event.keyCode === 13) {
                self.ApplyInput();
                return false;
            }
            return true;
        }    

标记:

                 <table>
                   <tbody data-bind="foreach: Inputs">
                     <tr>
                         <td><input type="text" placeholder="Start" data-bind="value: InputStart, event: { keypress: $parent.triggerApplyInputByEnter }" /></td>
                         <td><input type="text" placeholder="End"  data-bind="value: InputEnd, event: { keypress: $parent.triggerApplyInputByEnter }" /></td>
                     </tr>
                   </tbody>
                </table>
              </td>
            <td>
               <a href="#" title="" data-bind="click: ApplyInput" ><span>Apply Input</span></a>
            </td>

我的直觉是，绑定(bind)到输入字段的可观察量在输入字段失去焦点之前不会更新。有关如何在按键处理程序中读取未提交的值或在按 Enter 时强制输入字段进行数据绑定(bind)的任何指导，或在按 Enter 时以任何其他方式读取最新值的指导？

更新:我发现使用“valueUpdate:'afterkeydown'”可以在每次按键时更新可观察值，如果输入大量数据，这似乎效率低下，但对于我的情况来说已经足够好了。

<td><input type="text" placeholder="Start" data-bind="value: InputStart, valueUpdate:'afterkeydown', event: { keypress: $parent.triggerApplyInputByEnter }" /></td>

Answer 1

textInput绑定(bind)是为实时跨浏览器更新而设计的。这将满足您的用例。

valueUpdate: 'afterkeydown'" 绑定(bind)可能在多种情况下失败，例如移动设备。