Tilman Börner - Forms over Data mit Knockout.js

Здесь есть возможность читать онлайн «Tilman Börner - Forms over Data mit Knockout.js» — ознакомительный отрывок электронной книги совершенно бесплатно, а после прочтения отрывка купить полную версию. В некоторых случаях можно слушать аудио, скачать через торрент в формате fb2 и присутствует краткое содержание. Жанр: unrecognised, на немецком языке. Описание произведения, (предисловие) а так же отзывы посетителей доступны на портале библиотеки ЛибКат.

Forms over Data mit Knockout.js: краткое содержание, описание и аннотация

Предлагаем к чтению аннотацию, описание, краткое содержание или предисловие (зависит от того, что написал сам автор книги «Forms over Data mit Knockout.js»). Если вы не нашли необходимую информацию о книге — напишите в комментариях, мы постараемся отыскать её.

Knockout.js ist ein sogenanntes Model-View-ViewModel Framework für JavaScript. Mit seiner Hilfe trennt man die Logik von der Darstellung. Damit wird der Logik-Code testbar und ein Programm erhält eine klare Struktur.
Dieses DevBook führt in die Thematik um Knockout.js ein. Dabei steht ein praxisrelevanter Umgang mit der Bibliothek im Vordergrund. Nach dem Studium des Buches sollten Sie in der Lage sein, Knockout.js in eigenen JavaScipt-Frontends einzusetzen, sämtliche HTML-Eingabeelemente zu nutzen und Daten dynamisch von einem Server nachzuladen und darzustellen.

Forms over Data mit Knockout.js — читать онлайн ознакомительный отрывок

Ниже представлен текст книги, разбитый по страницам. Система сохранения места последней прочитанной страницы, позволяет с удобством читать онлайн бесплатно книгу «Forms over Data mit Knockout.js», без необходимости каждый раз заново искать на чём Вы остановились. Поставьте закладку, и сможете в любой момент перейти на страницу, на которой закончили чтение.

Тёмная тема
Сбросить

Интервал:

Закладка:

Сделать

throttle lässt sich nun hervorragend für Ajax-Anfragen verwenden. Zum Beispiel so:

viewModel.mytext = ko.computed(function(){

$.getJSON('../jquerydata/service/index.php', {

"value" : viewModel.myval() },

function(da){

console.log(da.toString());

}

);

}).extend({ throttle : 1000 });

Die Ajax-Funktion getJSON von jQuery wird erst dann aufgerufen, wenn der Anwender eine Sekunde keinen Text mehr eingegeben hat. Als URL-Parameter value wird der Wert von myval übermittelt. Die übergebene Callback-Funktion im Aufruf von getJSON stellt das Ergebnis dar. Hier ließe sich natürlich auch eine Observable setzen und damit das Ergebnis direkt in der View anzeigen.

function(da){

if (da.person)

{

viewModel.lastname(da.person.lastname);

}

}

Wenn Sie Tipp 2 verwenden und sich den Inhalt des ViewModels anzeigen lassen, sehen Sie, dass sich bei der Eingabe in das input -Element nach dem Return schon etwas tut. Das Datenfeld lastname im ViewModel spiegelt den Wert im Control input wider.

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:

Klick mich

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:

type="text/javascript">

Klick mich

Debug

var viewModel =

{

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

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

}

ko.applyBindings(viewModel);

viewModel.lastname("Huber");

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:

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.

data-bind="value: lastname">

Auch Schriftart, Schriftgrad, Farbe et cetera lassen sich über CSS verändern.

color: Green" cols="40" rows="10"

maxlength="10" data-bind="value: lastname">

Конец ознакомительного фрагмента.

Текст предоставлен ООО «ЛитРес».

Прочитайте эту книгу целиком, купив полную легальную версию на ЛитРес.

Безопасно оплатить книгу можно банковской картой Visa, MasterCard, Maestro, со счета мобильного телефона, с платежного терминала, в салоне МТС или Связной, через PayPal, WebMoney, Яндекс.Деньги, QIWI Кошелек, бонусными картами или другим удобным Вам способом.

Тёмная тема
Сбросить

Интервал:

Закладка:

Сделать

Похожие книги на «Forms over Data mit Knockout.js»

Представляем Вашему вниманию похожие книги на «Forms over Data mit Knockout.js» списком для выбора. Мы отобрали схожую по названию и смыслу литературу в надежде предоставить читателям больше вариантов отыскать новые, интересные, ещё непрочитанные произведения.


Отзывы о книге «Forms over Data mit Knockout.js»

Обсуждение, отзывы о книге «Forms over Data mit Knockout.js» и просто собственные мнения читателей. Оставьте ваши комментарии, напишите, что Вы думаете о произведении, его смысле или главных героях. Укажите что конкретно понравилось, а что нет, и почему Вы так считаете.

x