Как использовать нокаута «OnEnter» с $ (документ) .on («нажатие клавиши», «форма»

Question

Я просто хочу знать, как использовать Нокаут-х onEnter с JQuery в $(document).on("keypress", "form"...

Потому что каждый раз, когда я нажимаю войти в form она представит формульной на сервер.

Использование event.preventDefault() предотвратит отправку формы, но также предотвращает нокаутов onEnter ...?!

$(document).on("keypress", "form", function (event) 
{ 
    if ($(event.target).closest("input[data-bind*='onEnter']")[0]) 
    { 
     event.preventDefault(); //preventing form to be submitted 
     return true;//but the function behind 'onEnter' will not be trigered 
    } 

    if (event.keyCode == 13)//Enter 
    { 
     event.preventDefault(); 
     return false; 
    } 
}); 

Как будет onEnter будет запущен после упомянутого выше кода?

Благодаря

Answer 1

Во-первых, если вы собираетесь использовать JQuery вам нужно будет держать его в контексте Нокаут иначе вы будете иметь серьезные проблемы в креплениями и с вашего обновления вида, когда все меняется , Кроме того, вы в своем текущем коде вам придется называть ваш viewmodel.yourMethod - это не идеально.

Это, как говорится, стоило бы создать свой собственный bindingHandler, чтобы обработать это, а затем добавить обработчик в любой элемент, который вы используете.

Это не было протестировано, хотя и доставит вас рядом.

// the custom binding handler, its called executeOnEnter 
ko.bindingHandlers.executeOnEnter = { 
    init: function (element, valueAccessor, allBindingsAccessor, viewModel) { 
     var allBindings = allBindingsAccessor(); 
     // in this case, element is the html element you bound the handler - so perhaps your form tag 
     $(element).keypress(function (event) { 
      var keyCode = (event.which ? event.which : event.keyCode); 
      // the enter key 
      if (keyCode === 13) { 
       allBindings.executeOnEnter.call(viewModel); 
       event.preventDefault(); 
       return false; 
      } 
      return true; 
     }); 
    } 
}; 

Вы можете прикрепить это к вашей форме, что-то вроде:

<form data-bind="executeOnEnter:theFunctionInYourViewModelToCall" >

Answer 2

Вы должны позволить Нокаут сделать все на высшем уровне обработки в вашем приложении событие.

Существует встроенный submit связывания, который захватывает submit события формы:

<form data-bind="submit: captureEnter"></textarea> 

Он работает так же, с помощью встроенного в event обязательным для всех видов других событий:

<textarea data-bind="event: {keypress: captureEnter}"></textarea> 

в методе captureEnter в вашем ViewModel вы можете посмотреть в код ключа и реагировать на клавишу ввода:

self.captureEnter = function (vm, event) { 
    var keyCode = event.keyCode || event.which; 

    if (keyCode === 13) { 
     // do something... 
    } else { 
     return true; // let the event do what it normally would do 
    } 
}); 

По умолчанию Knockout prevents the default action of an event. Используйте return true;, чтобы разрешить действие по умолчанию (т. Е. «Форма отправлена» или «символ появляется в текстовой области» и т. Д.).