Heim >Web-Frontend >js-Tutorial >So funktionieren Formularereignisbindungen in KnockoutJs
So funktionieren Formularereignisbindungen in KnockoutJs
- Barbara StreisandOriginal
- 2024-11-26 10:58:091075Durchsuche
Dieser Inhalt ist im Grunde eine Übersetzung der Originalmaterialien. Ziel ist es, mehr über KnockoutJs für Magento 2 zu erfahren und Inhalte auf Portugiesisch über KnockouJs zu erstellen.
Dokumentation
- Die Datenbindungssyntax
- Bindungskontext
- Die „Klick“-Bindung
- Die „Ereignis“-Bindung
- Die „Submit“-Bindung
- Die Bindungen „Aktivieren“ und „Deaktivieren“
- Die „Wert“-Bindung
- Die „textInput“-Bindung
- Die „hasFocus“-Bindung
- Die „karierte“ Bindung
- Die Bindung „Optionen“
- Die Bindung „selectedOptions“
- Die „uniqueName“-Bindung
Bindungen
In KnockoutJs sind Bindungen die Möglichkeit, die Logik des ViewModel (die Daten- und Geschäftslogik) mit der Ansicht (HTML) zu verbinden. Kurz gesagt: Durch Bindungen spiegelt die Benutzeroberfläche automatisch Änderungen in Ihren Daten wider, ohne dass das DOM direkt manipuliert werden muss.
Bindungen in KnockoutJs funktionieren über das data-bind-Attribut für HTML-Elemente. In diesem Attribut geben Sie die Bindung an, die Sie verwenden möchten, und die zugehörigen Werte.
Formularereignisse
Klicken
Der Binding-Klick fügt einen Ereignishandler hinzu, sodass die ausgewählte JavaScript-Funktion aufgerufen wird, wenn auf das zugehörige DOM-Element geklickt wird. Dies wird am häufigsten bei Elementen mit den Tags
Jedes Mal, wenn auf das Element geklickt wird, wird die Methode aufgerufen, die im ViewModel übergeben wurde, was wiederum den Status des ViewModel ändert, wodurch die Benutzeroberfläche angezeigt wird aktualisiert.
<div>
You've clicked <span data-bind="text: numberOfClicks"></span> times
<button data-bind="click: incrementClickCounter">Click me</button>
</div>
<script type="text/javascript">
ko.applyBindings({
numberOfClicks : ko.observable(0),
incrementClickCounter : function() {
var previousCount = this.numberOfClicks();
this.numberOfClicks(previousCount + 1);
}
});
</script>
Standardmäßig verhindert KnockoutJs, dass das Klick-Ereignis Standardaktionen ausführt. Das bedeutet, dass der Browser bei Verwendung von Binding Click auf einem -Tag nur die Funktion aufruft und nicht zum href des Links navigiert. Click-to-Click-Bindung wird normalerweise verwendet, wenn Sie den Link als Teil einer Benutzeroberfläche verwenden, die das ViewModel manipuliert, und nicht als normalen Hyperlink zu einer anderen Webseite. Wenn es erforderlich ist, dass die Standard-Klickaktion fortgesetzt wird, geben Sie in der Funktion einfach „true“ zurück.
Ereignis
Mit dem Binding-Ereignis können Sie einen Ereignishandler für ein bestimmtes Ereignis hinzufügen, sodass die von Ihnen gewählte JavaScript-Funktion aufgerufen wird, wenn dieses Ereignis für das zugehörige DOM-Element ausgelöst wird. Dies kann verwendet werden, um eine Bindung an jedes Ereignis wie Tastendruck, Mausbewegen oder Beenden der Maus vorzunehmen.
<div>
You've clicked <span data-bind="text: numberOfClicks"></span> times
<button data-bind="click: incrementClickCounter">Click me</button>
</div>
<script type="text/javascript">
ko.applyBindings({
numberOfClicks : ko.observable(0),
incrementClickCounter : function() {
var previousCount = this.numberOfClicks();
this.numberOfClicks(previousCount + 1);
}
});
</script>
Einreichen
Die Bindung Submit *ist eine Submit-Bindungsanweisung für ein Formular, die die standardmäßige Submit-Aktion des Browsers für dieses Formular verhindert, mit anderen Worten, der Browser ruft die Handler-Funktion auf, tut dies aber nicht Senden Sie das Formular an den Server. Die *submit-Bindung wird normalerweise verwendet, wenn das Formular als Schnittstelle zum ViewModel und nicht als normales HTML-Formular verwendet wird. Wenn das Formular als normales HTML-Formular übermittelt werden muss, geben Sie einfach „true“ von Ihrem Übermittlungs-Handler zurück.
<div>
<div data-bind="event: { mouseover: enableDetails, mouseout: disableDetails }">
Mouse over me
</div>
<div data-bind="visible: detailsEnabled">
Details
</div>
</div>
<script type="text/javascript">
ko.applyBindings({
detailsEnabled: ko.observable(false),
enableDetails: function() {
this.detailsEnabled(true);
},
disableDetails: function() {
this.detailsEnabled(false);
}
});
</script>
Aktivieren/Deaktivieren
binding enable bewirkt, dass das zugehörige DOM-Element aktiviert wird, wenn sein Parameterwert wahr ist. Binding disable funktioniert umgekehrt und führt dazu, dass das zugehörige DOM-Element deaktiviert wird, wenn sein Wert wahr ist.
<form data-bind="submit: doSomething">
<button type="submit">Submit</button>
</form>
<script type="text/javascript">
ko.applyBindings({
this.doSomething = function(formElement) {
// ... now do something
}
});
</script>
Wert
Der Binding-Wert *bindet den Wert des DOM-Elements, das einer Eigenschaft im *ViewModel zugeordnet ist. Dies ist normalerweise bei Formularelementen wie ,