Bindung Tastendruck Ereignis auf Knockoutjs, beobachtbar nicht bevölkert

Question

Benötigen Sie ein wenig Hilfe mit Knockoutjs und Bindung eines Tastendruckereignisses. Ich versuche, knockout zu verbinden, so dass ich auf der Enter-Taste drücken, von innerhalb eines Textfelds. So kann ich die gleiche Aktion wie das Klicken auf eine Schaltfläche ausführen. Es ist ein wenig schwierig zu erklären, aber hoffentlich wird JsFiddle demonstrieren, was ich zu erreichen versuche.

http://jsfiddle.net/nbnML/8/

Das Problem, das ich ist haben, dass beobachtbare Wert nicht immer aktualisiert und ich denke, es ist etwas mit einer beobachtbaren zu tun, nicht aktualisiert werden, bis Fokus von der Textbox weg bewegt?

Jede dieser Problemlösungen.

Danke!

Answer 1

Eine Möglichkeit ist es, die valueUpdate zusätzliche Bindung zu verwenden, um ein Update auf jedem Tastendruck zu erzwingen. Zum Beispiel würden Sie tun:

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

Wenn das nicht das, was Sie nach, dann würde wirklich wollen Sie das Element des Änderungsereignis in Ihrem Handler feuern. Zum Beispiel mit jQuery, würden Sie etwas tun wie: $(event.target).change();.

Es wäre besser, wenn dieser Brauch in eine Bindung zu bewegen. Vielleicht so etwas wie (soll wohl prüfen, ob das Ergebnis der valueAccessor() ist eine Funktion):

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; 
     }); 
    }   
}; 

Hier wird Ihre Probe aktualisiert: http://jsfiddle.net/rniemeyer/nbnML/9/

Answer 2

nicht Bindungen Rabatt einreichen: http://knockoutjs.com/documentation/submit-binding.html

Dies sorgt für einige IE 9/10-Fehler, wie zum Beispiel, dass der Return-Schlüssel das Observable nicht aktualisiert. Mit dieser gesorgt brauchen Sie nicht keycode 13

html abfangen:

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

Code:

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

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

dies hier Siehe:

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