Knockout JS - textInput绑定更新延迟一个字符

时间:2017-07-05 20:43:01

标签: javascript knockout.js

我目前正在尝试显示一条消息,该消息取决于使用knockout.js即时更新输入文本框的内容。 textInput绑定似乎工作得很好,除了它只在之后才更新我已经输入了一个字符。在第一个字符上,它表示未定义。

HTML:

 <input id="userResponse" 
                       data-bind="textInput: textInput,
                              hasFocus: responseSelected,
                              ojComponent: {component: 'ojInputText', 
                                            value: userResponse,
                                            rootAttributes: {
                                            style:'font-size:32px; max-width:100%;'}}"
                       autofocus/>

JS

self.textInput = ko.observable();
self.responseTypeValidation = function (keyCode) {
                oj.Logger.log("input: " +self.textInput());
                if (self.promptMetadata()) {

                    if(self.textInput().match(/[a-z]/))
                    {
                        self.responseErrorMessage("Numbers only");
                    }
                    else {
                       self.responseErrorMessage('');
                    }                      
                }
            };

例如,当我输入&#34;你好&#34;它会抛出错误,说明&#34; h&#34;上的textInput未定义然后我输入&#34; ello&#34;它完成了我实际想要它做的事情(它只显示&#34;数字和#34;消息)。为什么不在第一个输入字符上更新?任何帮助搞清楚这一点将不胜感激

编辑: 这是我的日志,当输入框显示&#34;他&#34;,&#34; h&#34;抛出错误和&#34; e&#34;还没有被阅读

jobCommand.js:81 Uncaught TypeError: Cannot read property 'match' of undefined
at jobCommandContentViewModel.self.responseTypeValidation (jobCommand.js:81)
at ControllerViewModel.keyDown (jobCommand.js:33)
at HTMLDivElement.<anonymous> (appController.js:60)
at HTMLDivElement.dispatch (jquery-3.1.1.js:5201)
at HTMLDivElement.elemData.handle (jquery-3.1.1.js:5009)


ojcore.js:262 input: h

1 个答案:

答案 0 :(得分:1)

由于使用textInput,这会立即在每个击键或其他文本输入机制上更新模型(例如剪切或拖动文本,这不一定会引发任何焦点更改事件)。

因此:

解决方案1(已计算):

LocalDateTime.parse(date1, formatter1);

解决方案2(订阅):

self.Validation = ko.computed(function () {
    if(self.textInput().match(/[a-z]/))
        self.responseErrorMessage("Numbers only");
    else
        self.responseErrorMessage('');
}, self);