2017-04-11 3 views
0

ich in meinem onInit im Controller folgenden Code haben:SAPUI5 keydown in onInit genannt nicht

$("input").on("keydown", (
      function(evt) { 
         if (evt.keyCode == 17 && (evt.ctrlKey)) { 
            evt.preventDefault(); 

            that.onMoveStorageBin(); 
         } 

So Idee ist, wenn ich F11-Taste drücken, würde onMoveStorageBin Funktion ausgeführt werden. Aber es geht nicht in den onInit, wenn ich irgendeinen Knopf drücke. Wo ist der richtige Ort, um diesen Umgang mit dem Keydown zu platzieren? Danke, Tim

Antwort

1

Sie sollten Ihr Code-Snippet auf dem OnAfterRendering Lifecycle-Hook ausführen. Dies liegt daran, dass der Aufruf von jQuery in onInit keine Eingabe finden kann (da die Elemente, die Ihrer Ansicht entsprechen, noch nicht zum DOM hinzugefügt wurden).

Basierend auf der Beschreibung und dem Code, verstehe ich, dass Sie überprüfen müssen, ob die F11 + CTRL gedrückt wurde (daher ist die Überprüfung evt.keyCode == 122 && evt.ctrlKey); Wenn Sie ein einfaches F11 wollen, müssen Sie nur evt.keyCode == 122 überprüfen.

Sie können eine Arbeits Geige finden Sie hier: https://jsfiddle.net/8kcs8xch/4/

onAfterRendering: function() { 
    jQuery("input").on("keydown", 
    function(evt) { 
     if (evt.keyCode == 122 && evt.ctrlKey) { 
     evt.preventDefault(); 
     sap.m.MessageToast.show('Alert'); 
     } 
    }); 
} 

Dieser Ansatz hat folgende Einschränkungen:

  • Es DOM direkt verwendet und macht Annahmen darüber, wie UI5 ​​Kontrollen erbracht werden.
  • Es gilt der Hörer auf ALL vorhandenen Eingänge. Sie können dies vermitteln, indem Sie auch andere Selektoren verwenden (z. B. CSS).

Eine wesentlich bessere Lösung wäre, ein benutzerdefiniertes Steuerelement zu erstellen, das über dieses Ereignis verfügt. Hier finden Sie ein Beispiel: https://jsfiddle.net/8kcs8xch/3/

Grundsätzlich müssen Sie auf das Keydown-Ereignis hören, indem Sie einen DOM-Handler in Ihrem neuen Steuerelement deklarieren. Anschließend können Sie eine benutzerdefinierte UI5 ​​Ereignis definieren (Ich nannte es einfach alert) auf der Grundlage dieses DOM-Ereignis:

var CustomInput = sap.m.Input.extend("CustomInput", { 
    metadata: { 
    events: {alert: {}} 
    }, 
    onkeydown: function(evt) { 
    if (evt.keyCode == 122 && evt.ctrlKey) { 
     // only prevent the default of the DOM event if the 
     // UI5 event's preventDefault is called as well. 
     if (!this.fireEvent("alert", {}, true)) { 
      evt.preventDefault(); 
     } 
    } 
    }, 
    renderer: {} 
}); 
+0

Danke für die Kommentare und den Beispielen. Nicht sicher, ob ich Ihren zweiten Ansatz verstehe, wo sollte ich das benutzerdefinierte Steuerelement platzieren? – Tim

+0

Bitte überprüfen Sie die [Dokumentation] (https://openui5.hana.ondemand.com/#docs/guide/91f1703b6f4d1014b6dd926db0e91070.html). Kurz gesagt, sollten Sie Ihr benutzerdefiniertes Steuerelement in einer separaten .js-Datei mit einem geeigneten Namespace definieren (basierend auf Ihrem Root-Namespace und der Ordnerstruktur). Sie können dann auf Ihren Namespace z. eine XML-Ansicht und verwenden Sie Ihr Steuerelement wie jedes andere Standard-UI5-Steuerelement. –

+0

Beispiel: Das benutzerdefinierte Steuerelement [hier] (https://github.com/serban-petrescu/sbwo/blob/master/web/util/HelpVideo.js) wird in [this] verwendet (https: // github. com/serban-petrescu/sbwo/blob/master/web/fragment/dialog/HilfeVideoDialog.fragment.xml) XML-Fragment. –