KnockoutJS: Как обновить модель представления после того, как пользователь скопировал "вставить" в текстовое поле?

Я работаю над сайтом, который автоматически заполняет результат поиска в таблице после того, как пользователь ввел текст во входном текстовом поле (аналогично поисковому поиску в Google).

Мне удалось получить нокаут js для обновления модели представления, поскольку пользователь вводит информацию, добавляя

в свой атрибут привязки данных, однако мне также нужно обработать случай, когда пользователь щелкает правой кнопкой мыши и вставляет какой-либо текст в текстовое поле, поэтому я попытался:

но это не сработало, и когда я попытался прочитать значение текстового поля через модель представления , я продолжал получать старое значение до тех пор, пока не выйду из входного текстового поля.. p >

Ответы

Ответ 1

Вы можете использовать valueUpdate: 'input'. У меня есть testet, чтобы работать в Opera, Firefox и Chrome. Я нахожусь в ящике Linux, поэтому я не могу проверить его в IE. Проверьте эту скрипту

UPDATE: теперь я тестирую его в IE8, и он не работает. Но, похоже, работает следующее.

valueUpdate:['afterkeydown','propertychange','input']

Спасибо Майклу Бесту за его комментарий об этом:) Я обновил скрипку

UPDATE okt 2014: Как упоминалось в комментарии kzh ниже, в одной из более поздних версий Knockout.js была добавлена привязка textInput. Эта привязка обрабатывает этот сценарий и имеет встроенную обработку ошибок браузера http://knockoutjs.com/documentation/textinput-binding.html

Ответ 2

Новый способ

Вместо:

data-bind="value: myValue, valueUpdate: ['input', 'textchange']"

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

data-bind="textInput: myValue"

Из документации:

Связывание textInput связывает текстовое поле (<input>) или текстовую область (<textarea>) с свойством viewmodel, обеспечивая двухсторонние обновления между свойством viewmodel и значением элементов. В отличие от привязки value textInput предоставляет мгновенные обновления из DOM для всех типов ввода пользователя, включая события автозаполнения, перетаскивания и буфера обмена.

Старый путь

valueUpdate: ['afterkeydown','propertychange','input']

Не работает в IE9, если вы хотите поддерживать RightMouseClick → Delete или RightMouseClick → Cut.

Решение, с которым я столкнулся, включает использование jQuery и плагина jQuery под названием jQuery Splendid Textchange. После того, как вы загрузите оба сценария jQuery и плагина, вы можете с радостью использовать событие "textchange".

valueUpdate: 'textchange'

Но я могу однажды перестать поддерживать плохие браузеры, поэтому у меня есть это:

valueUpdate: ['input', 'textchange']

Вот скрипка, которую я сделал для тестирования этого и других событий: http://jsfiddle.net/kaleb/w3ErR/

N.B. Если вы используете requirejs, jquery может быть жесткой зависимостью нокаута, чтобы это нормально работало все время.