Читать книгу Forms over Data mit Knockout.js - Tilman Börner - Страница 9

Auf einen Event reagieren

Оглавление

Jetzt wissen Sie, wie Sie Daten in der View anzeigen oder wie Sie in die View eingegebene Daten von dort auslesen. Stellt sich nur die Frage, wie Sie auf Events wie einen Mausklick reagieren können, beispielsweise wenn der Anwender einen Knopf betätigt.

Auch dafür ist Knockout.js selbstverständlich gerüstet. Die Ereignisbindung läuft genauso wie die Datenbindung. Sie fügen dem HTML-Code nur eine neue Anweisung hinzu:

<button data-bind="click: buttonClicked">

Klick mich

</button>

Laden Sie jetzt die HTML-Seite neu, erhalten Sie eine Fehlermeldung auf der Konsole: Die Datenbindung wird nicht verstanden. Das ist auch kein Wunder, denn das ViewModel verfügt über kein Feld, das es der Eigenschaft click: buttonClicked zuordnen kann.

Es fehlt also noch das passende Feld. Nur würde ein Datenfeld in diesem Fall keinen Sinn machen; ein

"buttonClicked": ko.observable()

führt also zu nichts. (Memo für den Autor: Das ist auch klar, denn es sollte ja etwas ausgeführt werden, wenn man auf den Knopf klickt.) Trotzdem: Was ausgeführt werden soll, muss über das Feld erreichbar sein, etwa eine Funktion. Schreiben wir aber

"buttonClicked": alert("Hallo");

führt das nicht zum gewünschten Ergebnis. Das Alert wird sofort beim Neuladen der Seite ausgeführt, ein Klick auf den Knopf hingegen führt nicht zu der Dialogbox. So einfach geht das in JavaScript nicht. Hier muss eine anonyme Funktion den Aufruf kapseln.

"buttonClicked": function(){ alert("Hallo"); }

Diese Zeile hat das gewünschte Ergebnis: Beim Reload passiert nichts. Erst ein Klick auf den Knopf ruft das Alert auf und die Dialogbox erscheint. Wenn wir das Hallo jetzt noch durch

this.lastname()

ersetzen, haben wir Folgendes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title></title>

<script src="knockout-2.0.0.js"

type="text/javascript">

</script>

</head>

<body>

<input data-bind="value: lastname" />

<button data-bind="click: buttonClicked">

Klick mich

</button>

<h2>Debug</h2>

<div data-bind="text: ko.toJSON(viewModel)">

</div>

<script type="text/javascript">

var viewModel =

{

"lastname": ko.observable("Gertrud"),

"buttonClicked": function(){ alert(this.lastname()); }

}

ko.applyBindings(viewModel);

viewModel.lastname("Huber");

</script>

</body>

</html>

Jetzt sorgt ein Klick auf den Knopf dafür, dass der in das Eingabefeld eingegebene Text in der Dialogbox angezeigt wird. Probieren Sie es aus. Geben Sie Meier ein und klicken Sie auf den Knopf. Schon erscheint in der Dialogbox Meier. Und auch im ViewModel wird das Feld lastname auf den Wert Meier gesetzt.

Forms over Data mit Knockout.js

Подняться наверх