Вызов функции при нажатии клавиши ввода

Как вызвать функцию с помощью knockout.js при нажатии клавиши ввода. вот мой код ниже.

ko.bindingHandlers.enterkey = {
init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
    var inputSelector = 'input,textarea,select';
    $(document).on('keypress', inputSelector, function (e) {
        var allBindings = allBindingsAccessor();
        $(element).on('keypress', 'input, textarea, select', function (e) {
            var keyCode = e.which || e.keyCode;
            if (keyCode !== 13) {
                alert('a');
                return true;
            }

            var target = e.target;
            target.blur();

            allBindings.enterkey.call(viewModel, viewModel, target, element);
            alert('b');
            return false;
        });
    });
}
};
ko.applyBindings(viewModel);

HTML

<input type="text" data-bind="value:sendMessageText, enterkey: sendMessage" />

ViewModel

function contactsModel(){
    var self = this;
    self.jid=ko.observable();
    self.userName=ko.observable();
    self.sendMsgText=ko.observable();
    self.sendMessage = function(){
        if(self.sendMessageText() == '' )
            alert("Enter something in input field");
        else{
            var message = {
                to : self.userName(),
                message : self.sendMsgText()
            }
            self.sentMessages.push(message);
            sendMessage(message);
        }

     }
 }

Любая идея о том, что здесь не так, или предложения для лучшего подхода.

Ответ 1

Когда вы создаете свой собственный привязку привязки к нокауту, он используется так же, как другие bindHanlders, например: data-bind="text: myvalue"

поэтому ваш HTML должен выглядеть примерно так.

<input type="text" data-bind="value:sendMessageText, valueUpdate: 'afterkeydown', enterkey: sendMessage" />

Важным связыванием для добавления является привязка valueUpdate: 'afterkeydown'. Без этой привязки, когда пользователь вводит текст во вход и попадание, событие onblur не возникает перед привязкой enterkey. Это приводит к наблюдаемому возврату неожиданного значения, а не текущему тексту, если к входному значению обращается действие, вызванное enterkey.

Еще один взгляд на пользовательские привязки для KnockoutJS

ИЗМЕНИТЬ
Это то, что я использовал ранее в других проектах. JsFiddle Demo

ko.bindingHandlers.enterkey = {
    init: function (element, valueAccessor, allBindings, viewModel) {
        var callback = valueAccessor();
        $(element).keypress(function (event) {
            var keyCode = (event.which ? event.which : event.keyCode);
            if (keyCode === 13) {
                callback.call(viewModel);
                return false;
            }
            return true;
        });
    }
};

Ответ 2

Не нужно настраивать привязку, просто используйте событие нажатия на нокаут (Документы для нокаута):

<input type="text"
       data-bind="textInput : keyword, 
                  event: {keypress: onEnter}" >
</input>

И ваша функция:

that.onEnter = function(d,e){
    e.keyCode === 13 && that.search();  
    return true;
};

Пример JSFiddle

EDIT: новое связывание с нокаутом (3.2.0): textInput - исключает необходимость привязки valueUpdate.

Ответ 3

Это работало для меня, благодаря @DaafVader для большей части.

в поле зрения

<input data-bind="value: searchText, valueUpdate: 'input', event: { keyup: searchKeyUp }" />

в режиме просмотра

var searchKeyUp = function (d, e) {
    if (e.keyCode == 13) {
        search();
    }
}

Ответ 4

И это сработало для меня благодаря @DaafVader.

в поле зрения:

<input id="myInput" type="text" 
      data-bind="value : keyword, valueUpdate: 'afterkeydown'">
</input>

в javascript:

$("#myInput").keyup(function (event) {
        if (event.keyCode == 13) {
            search();
        }
});

Включение события keyup в событие jquery вместо события нокаута уменьшает сложность модели представления нокаута.

Ответ 5

Используйте привязку отправки (http://knockoutjs.com/documentation/submit-binding.html) в форме вокруг вашего ввода, что она сделала для.

Пример из документов Knockout:

<form data-bind="submit: doSomething">
    ... form contents like inputs go here ...
    <button type="submit">Submit</button>
</form>

<script type="text/javascript">
    var viewModel = {
        doSomething : function(formElement) {
            // ... now do something
        }
    };
</script>

Он также автоматически обрабатывает вашу кнопку, если она есть.