Enter-Taste aktiviert

Question

i ein HTML-Textfeld mit onkeypress Ereignisse habe wie Nachricht senden unter

<input type="text" data-bind="attr:{id: 'txtDim' + $data.userID, onkeypress: $root.sendMsg('#txtDim' + $data.userID, $data)}" /> 

ich JavaScript-Funktion geschrieben habe, um Mitteilung zu senden, während der Taste preesing eingeben wie unten:

self.sendMsg = function (id, data) { 
    $(id).keydown(function (e) { 
     if (e.which == 13) { 
      //method called to send message 
      //self.SendDIM(data); 
     } 
    }); 
}; 

In meinem Fall muss ich Enter-Taste zweimal drücken, um die Nachricht zu senden. 1: Tastendruck Anruf self.sendMsg 2: Tastendruck Anruf self.SendDIM

Aber ich muss Nachricht nur auf einem Tastendruck senden. Es kann nur in einfachem Javascript durchgeführt werden. Aber ich brauche Viewmodel Daten, also in Datenbindung angewendet. Es funktioniert also nicht gut.

Answer 1

Ich habe hinzugefügt keypress Ereignis running example here sehen zu Textbox

<input type="text" data-bind="attr:{id: 'txtGoalsheetNote' + $data.userID}, event:{keypress: $root.SendMsg}" /> 

Und in Javascript ich habe die folgende Methode, indem Ereignis als Parameter

0 hinzugefügt

self.SendMsg= function (data, event) { 
    try { 
     if (event.which == 13) { 
      //call method here 
      return false; 
     } 
     return true; 
    } 
    catch (e) 
{ } 
} 

Dann ist seine Arbeit.

Answer 2

Der Grund, warum Sie die Eingabetaste zweimal drücken müssen, ist, dass Ihre sendMsg Methode nur einen Handler an das Ereignis anfügt. Dieser Handler wird dann beim zweiten Tastendruck aufgerufen.

Ein besserer Ansatz wäre, eine benutzerdefinierte Bindung Handler zu schreiben, die den Event-Handler und übergibt das Ansichtsmodell durch beimißt:

ko.bindingHandlers.returnAction = { 
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) { 

    var value = ko.utils.unwrapObservable(valueAccessor()); 

    $(element).keydown(function(e) { 
     if (e.which === 13) { 
     value(viewModel); 
     } 
    }); 
    } 
}; 

Sie eine wie unten