Binding keypress event su knockoutjs, osservabile non popolato

Question

Serve un po 'di aiuto con knockoutjs e associa un evento keypress. Sto provando ad agganciare knockout in modo che prendo il tasto Invio per entrare da una casella di testo. Quindi posso eseguire la stessa azione che fare clic su un pulsante. È un po 'difficile da spiegare, ma spero che questo JsFiddle dimostrerà quello che sto cercando di ottenere.

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

Il problema che ho è che il valore osservabile non è sempre aggiornato e credo che la sua qualcosa a che fare con un 'osservabile non essere aggiornato fino attenzione si allontana dalla casella di testo?

Qualsiasi soluzione a questo problema.

Grazie!

Answer 1

Un'opzione è utilizzare il binding aggiuntivo valueUpdate per forzare un aggiornamento su ogni pressione di tasto. Ad esempio, si potrebbe fare:

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

Se questo non è quello che cercate, allora davvero si vorrebbe sparare evento di modifica dell'elemento nel gestore. Ad esempio con jQuery, dovresti fare qualcosa come: $(event.target).change();.

Sarebbe meglio se spostarlo in un binding personalizzato. Forse qualcosa di simile (probabilmente dovrebbe controllare se il risultato di valueAccessor() è una funzione):

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

Qui è il campione aggiornamento: http://jsfiddle.net/rniemeyer/nbnML/9/

Answer 2

non sconto submit binding: http://knockoutjs.com/documentation/submit-binding.html

Questo si occupa di alcuni getchas di IE 9/10 come la chiave di ritorno che non aggiorna l'osservabile. Con questo preso cura di voi non hanno bisogno di intercettare keycode 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> 

codice:

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

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

Vai a questa qui:

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