Связывание события нажатия клавиши на нокаутах, наблюдаемое не заселенное

Нужно немного помочь с knockoutjs и привязать событие нажатия клавиши. Я пытаюсь подключить нокаут так, что я забираю нажатие клавиши ввода из текстового поля. Поэтому я могу выполнить то же действие, что и нажатие кнопки. Его немного сложно объяснить, но, надеюсь, этот JsFiddle продемонстрирует то, что я пытаюсь достичь.

Проблема заключается в том, что наблюдаемое значение не обновляется, и я думаю, что это что-то делать с наблюдаемым, не обновляемым, пока фокус не удаляется из текстового поля?

Ответы

Ответ 1

Один из вариантов - использовать дополнительную привязку valueUpdate для принудительного обновления каждого нажатия клавиши. Например, вы бы сделали:

<input type="text" data-bind="value: InputValue, valueUpdate: 'afterkeydown', event: { keypress: RunSomethingKey }" />

Если это не то, что вам нужно, тогда вы действительно хотите запустить событие изменения элемента в своем обработчике. Например, с помощью jQuery вы сделаете что-то вроде: $(event.target).change();.

Было бы лучше, хотя бы переместить это в пользовательскую привязку. Возможно, что-то вроде (вероятно, нужно проверить, является ли результат valueAccessor() функцией):

ko.bindingHandlers.enterKey = {
    init: function(element, valueAccessor, allBindings, vm) {
        ko.utils.registerEventHandler(element, "keyup", function(event) {
            if (event.keyCode === 13) {
                ko.utils.triggerEvent(element, "change");
                valueAccessor().call(vm, vm); //set "this" to the data and also pass it as first arg, in case function has "this" bound
            }

            return true;
        });
    }         
};

Вот ваш образец обновлен: http://jsfiddle.net/rniemeyer/nbnML/9/

Ответ 2

Не откладывайте привязки к отправке: http://knockoutjs.com/documentation/submit-binding.html

Это касается некоторых IE 9/10, таких как ключ возврата, не обновляющий наблюдаемый. При этом вам не нужно перехватывать код ключа 13

HTML:

<form data-bind="submit:RunSomething">
 <input type="text" data-bind="value: InputValue" />
 <input type="submit" value="test" />
 <div data-bind="text: InputValue" />
</form>

код:

var ViewModel = function () {
    var self = this;
    self.InputValue = ko.observable('');

    self.RunSomething = function (ev) {
        window.alert(self.InputValue());
    }
}
ko.applyBindings(new ViewModel());

Смотрите здесь:

http://jsfiddle.net/jnewcomb/uw2WX/