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

Das value-Binding

Bei einem div-Element, das vom Anwender keine Daten entgegennehmen kann, ist das natürlich etwas langweilig. Wenn Sie aber aus dem div-Element ein input-Element machen, wird das Ganze schon interessanter.

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

Abbildung 2: Das erste kleine Programm. Der in die Textbox eingegebene Wert ist im ViewModel sichtbar. Siehe dazu Tipp 1 und Tipp 2.

Wie Sie sehen, müssen Sie allerdings auch das Binding anpassen. Statt text ist es hier nun die Eigenschaft value. Ansonsten funktioniert alles ganz genauso.

Tipp 1: Die Konsole

Unter dem Browser Google Chrome und unter dem Internet Explorer gibt es eine Konsole, die Fehlermeldungen anzeigt, aber auch für die Ausgabe von Debug-Informationen genutzt werden kann. Unter Chrome schalten Sie die Konsole mit [Strg]+[Shift]+[I] ein, beim Internet Explorer führt [F12] zum Ziel. Über console.log(text) lässt sich darüber auch der Text text ausgeben.

Tipp 2: Die Debug-Sektion

In vielen Fällen ist es für das Debuggen hilfreich, einen Blick in das ViewModel zu werfen. Statt das immer über console.log-Aufrufe oder gar über alert-Anweisungen zu tun, können Sie Knockout.js auch dafür verwenden. Fügen Sie dazu im unteren Bereich der HTML-Seite noch folgende Anweisungen hinzu:

<hr />

<h2>Debug</h2>

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

</div>

Die letzte Zeile zeigt den Dateninhalt des ViewModels an.

Tipp 3: Fehlermeldungen von Knockout.js

Knockout.js schreit dann um Hilfe, wenn es ein Binding im HTML-Code findet, zu dem es keine Observable gibt. Umgekehrt gibt es keine Fehlermeldung: Definieren Sie eine Observable im JavaScript-Code, zu der es kein Binding-Element im HTML-Code gibt, meckert Knockout.js nicht.