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.
Mehrzeiliges Textfeld
Bislang wurden zwei Controls an ein ViewModel gebunden: Knopf und Textbox. Natürlich bietet Knockout.js auch Unterstützung für die anderen Kontrollelemente, die HTML im Repertoire hat.
Die einfachste Erweiterung ist, aus einer einzeiligen Textbox ein mehrzeiliges Textfeld zu machen. Ersetzen Sie dazu die Zeile mit dem input-Element durch folgende Zeile:
<textarea data-bind="value: lastname"></textarea>
Das Verhalten ändert sich nicht. Auch in das textarea-Element können Sie Text eingeben und über viewModel.lastname() den Inhalt abfragen. Da es sich um ein Standard-Formularelement von HTML handelt, lässt es sich über die Standardattribute beeinflussen.
<textarea cols="40" rows="10" maxlength="10"
data-bind="value: lastname">
</textarea>
Auch Schriftart, Schriftgrad, Farbe et cetera lassen sich über CSS verändern.
<textarea style="font-family: Arial; font-size: 16px; color: Green"
color: Green" cols="40" rows="10"
maxlength="10" data-bind="value: lastname">
</textarea>
Конец ознакомительного фрагмента.
Текст предоставлен ООО «ЛитРес».
Прочитайте эту книгу целиком, купив полную легальную версию на ЛитРес.
Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.
