Powiązanie zdarzenia wywołującego dla klawisza wejściowego powoduje dziwne zachowanie.

Question

Krótko mówiąc, chcę umożliwić użytkownikom naciśnięcie Enter na elemencie wejściowym i wywołanie metody w moim viewmodelu. Oto mój wkład html:

<input id="searchBox" class="input-xxlarge" type="text" data-bind="value: searchText, valueUpdate: 'afterkeydown', event: { keypress: $parent.searchKeyboardCmd}"> 

i tu jest moja metoda w VM:

searchKeyboardCmd = function (data, event) { if (event.keyCode == 13) searchCmd(); }; 

wszystko działa poprawnie i searchCmd jest wywoływana, gdy uderzę wejść na wejściu, ale problemem jest to, że mogę pisać nic w danych wejściowych, tzn. wszystko, co wpisuję w dane wejściowe, jest ignorowane. Z góry dziękuję za Twoją pomoc.

Answer 1

Zgodnie z dokumentami KO musisz powrócić true z programu obsługi zdarzeń, jeśli chcesz, aby domyślna akcja była kontynuowana.

searchKeyboardCmd = function (data, event) { 
    if (event.keyCode == 13) searchCmd(); 
    return true; 
}; 

Answer 2

here's ryba, która pokazuje, co ur staramy się robić, a także zastąpić zdarzenie „przyciśnięcie” w ur kod z keyup i usunąć $ rodzica tylko z nazwy funkcji, chyba że pole tekstowe jest wewnątrz loop..here nokaut foreach to poniżej zmodyfikowany kod:

<input id="searchBox" class="input-xxlarge" type="text" data-bind="value: searchText, valueUpdate: 'afterkeydown', event: { keyup: searchKeyboardCmd}" 

Answer 3

Oto działająca próbka.

http://jsfiddle.net/tlarson/qG6yv/

<!-- ko with: stuff --> 
    <input id="searchBox" class="input-xxlarge" type="text" 
    data-bind="value: searchText, valueUpdate: 'afterkeydown', 
    event: { keypress: $parent.searchKeyboardCmd}"> 
<!-- /ko --> 

A javascript:

var stuffvm = function(){ 
    var self = this; 

    self.searchText = ko.observable(); 
}; 

var vm = function() { 
    var self = this; 

    self.stuff = new stuffvm(); 

    self.searchCmd = function() { 
     console.log("search triggered"); 
    }; 

    self.searchKeyboardCmd = function (data, event) { 
     if (event.keyCode == 13) { 
      self.searchCmd(); 
     } 
     return true; 
    } 
} 

ko.applyBindings(new vm());