Wie man zwei Ereignisse an ein Element in knockout.js bindet

Question

Ich bin ein Novize zu Knockout.js.

Ich habe ein Code-Snippet, das im Grunde eine Modalität beim Klicken auf eine Bildschaltfläche öffnet. Aus irgendeinem Grund funktioniert es nicht beim Tastendruck. Hier

ist der Anfangscode:

<div class="text-center tooltip-lg"> 
    <a class="tooltip-container" tabindex="0"> 
     <i class="icon icon-pencil dynamic-icon tooltip_trigger" title="edit" data-toggle="modal" data-target="#assessment_type_modal" data-placement="top" data-bind="click: $root.opt.openModalForEdit"></i></a></div> 

Da es wurde keypress oder keyup Ereignis fehlt, habe ich die folgenden Änderungen vorgenommen.

<div class="text-center tooltip-lg"> 
    <a class="tooltip-container" tabindex="0"> 
     <i class="icon icon-pencil dynamic-icon tooltip_trigger" title="edit" data-toggle="modal" data-target="#assessment_type_modal" data-placement="top" data-bind="event: { click: $root.opt.openModalForEdit, keypress: $root.opt.openModalForEdit }" ></i></a></div> 

Die Aktion wird nicht durch den Tastendruck ausgelöst. Ich habe auch keyup versucht (wie in einigen Fragen im Stackoverflow erwähnt), das hat auch nicht funktioniert.

The Model looks like this: 

viewModel.opt = { 
    openModalForNew: function() { 
     // Some code 
    }, 
    openModalForEdit: function (assessmentType) { 
     // Some code 
    }, 
    saveModal: function() { 
     // Some code 
    }, 
    removeAsmtType: removeAsmtType 
}; 

Update: Die Aktion wird erkannt, weiß aber nicht, warum das Ereignis nicht ausgelöst wird. Wenn ich den unten stehenden Testfall durchführe, wird der Test jedes Mal auf der Konsole ausgedruckt, wenn ich den Mauszeiger über dieses Tag halte.

<div class="text-center tooltip-lg"> 
    <a class="tooltip-container" tabindex="0"> 
     <i class="icon icon-pencil dynamic-icon tooltip_trigger" title="edit" data-toggle="modal" data-target="#assessment_type_modal" data-placement="top" data-bind="event: { click: $root.opt.openModalForEdit, 'mouseover' : function() { console.log('TEST'); return true; }" ></i></a></div> 

Kann jemand vorschlagen, was ich falsch mache. Es gibt keine Fehler, die auch in der Browser-Konsole angezeigt werden.

Vielen Dank im Voraus.

Answer 1

Die keypress Ereignis wird auf dem Element ausgelöst, das den Fokus hat, d.h .: ein Element, das die tabindex (oder sogar contenteditable) -Attribut oder unterstützt sie automatisch (wie jedes <input> Element).

Sie können das Problem beheben, indem Sie die event: { keypress: ... } Bindung an Ihr <a> Element mit tabindex=0 verschieben.

ko.applyBindings({ 
 
    onPress: function(d, e) { 
 
    console.log("keypress on node", e.target.nodeName); 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script> 
 

 
<p>Tap the text and press a key. The console will log the element that has the keypress event</p> 
 
<a tabindex="0" data-bind="event: { 
 
    keypress: onPress 
 
}"> 
 

 
    <i data-bind="event: { 
 
    keypress: onPress 
 
    }">some text</i> 
 
</a>