Использование события keypress в нокауте JS

Я пытаюсь прочитать содержимое текстового поля html и извлечь данные из API, чтобы выполнить автозапуск в стиле Google. Я использую twitter bootstrap typeahead для автоматической полной функциональности. Для этого мне нужно записать ключи по мере их нажатия и вызвать вызов API с текстом запроса.

html для текстового поля - это

<input id="query" data-bind="value: query, valueUpdate: 'keypress', event: { keypress: check }"/>

Мое предположение заключалось в том, что это будет обновлять значение в viewmodel, как только будет нажата клавиша, а функция check будет показывать вызов в API. Но вызов выполняется для проверки(), и текстовое поле никогда не заполняется, когда пользователь вводит. если JS выглядит так:

function check() {
    alert("Hello");     
    }

Для каждой нажатой клавиши появляется привет, но текстовое поле в пользовательском интерфейсе HTML не отображает клавишу, которая была нажата/не записывает, какая клавиша была нажата. Как записать нажатие клавиши и отправить запрос одновременно?

Ответы

Ответ 1

  • убедитесь, что запрос является наблюдаемым
  • использовать valueUpdate = 'afterkeydown'
  • использовать event: { 'keyup': check }:

Также я бы использовал console.log, если возможно, в отличие от предупреждения, и запустил запрос, чтобы вы могли убедиться, что значение обновляется.:) Вы также хотите зарегистрировать событие, подобное этому

function check(data, event) {
    console.log(event);
}

который сообщит вам код ключа для нажатия клавиши

Ответ 2

Этот поток старый, но я заметил, что он не ссылается на использование привязки KO textInput. Это новая функция, добавленная в v3.2.0.

Документы KO, по крайней мере, на данный момент (январь-2015), специально решают эту проблему:

Примечание 1: textInput и привязка значений

Хотя привязка значения также может выполнять двустороннюю привязку между текстовыми полями и свойствами viewmodel, вы должны предпочесть textInput всякий раз, когда вам нужны немедленные обновления в реальном времени.

См. http://knockoutjs.com/documentation/textinput-binding.html