Knockout.js für .NET Einsteiger

An dieser Stelle möchte ich mich bei Herrn Johannes Hoppe für einen interessanten und informativen Beitrag bedanken, den er gestern zum Thema „Knockout.js für .NET Einsteiger“ per Webcast gehalten hatte. Dieser stellt den ersten Teil einer Reihe zum Thema Knockout dar. Auch wenn ich persönlich als PHP- Entwickler nicht im .NET- Umfeld tätig bin, ist die Knockout.js Bibliothek, welche in Javascript implementiert ist, generell im Web- Bereich einsetzbar. Die Stärken von Knockout.js liegen im Einsatz des MVVM- Patterns, Templating sowie dem Einsatz von Data- Bindings, durch die sich DOM- Elemente mit Viewmodel- Eigenschaften in Verbindung setzen lassen (siehe Beispiel am Ende dieses Beitrags).

Im ersten Teil zeigte der Referent anhand eines kleinen Beispiels, wie man die Welten von Visual Studio, Knockout.js und Data Binding kombiniert. Einführend stellte Herr Hoppe die im Vortrag verwendeten Tools vor, die er auch jedem .NET Entwickler ans Herzen legte, der sich mit Knockout.js befasst:

  • Visual Studio als Entwicklungsumgebung
  • Resharper, auf das kein .NET Entwickler verzichten will
  • JScript Editor Extensions
  • JS Hint für JQuery Unterstützung
  • Chutzpah
  • Knockout Mapping als Mapping Plugin

Einer der Vorteile von Knockout stellt die Möglichkeit dar, dass man HTML Elemente direkt verwenden kann. Daher erstellte auch Herr Hoppe in seinem bekannten Notizzettel- Beispiel zuerst ein HTML- Grundgerüst angereichert durch ein paar vorab definierte Stylesheets. Dieses wurde durch die Klammeraffen- Anweisung „@section“ um einen Bereich erweitert, in dem per „require([‚indexPage‘])“ die Abhängigkeit zur benötigten Javascript Klasse definiert wurde.

Nachdem er diese Abhängigkeit definiert hatte, erstellte Herr Hoppe im nächsten Schritt die definierte Klasse „indexPage.js“. In dieser wurden per „define([‚knockout‘, ‚jquery‘])“ die benötigten Module referenziert. Anschließend wurde ein zuvor erstelltes View Model angebunden. Für dieses wurden im nächsten Schritt Daten geladen und die Anbindung per Knockout Mapping realisiert.

Zum Abschluß des Vortrags wechselte Herr Hoppe wieder in die HTML- Klasse zurück, an der er die Realisierung von Data- bindings demonistrierte. So ging er beispielsweise auf die foreach- Schleife näher ein, indem er per „data-bind= foreach: notes“ die Darstellung mehrerer Notizzettel demontrierte. Abschließend wurde noch das Klick- binding „data-bind=  click: $root.foo“ vorgestellt.

Persönlich fand ich den Vortrag von Herrn Hoppe sehr kurzweilig und informativ sowie das vorgestellte Beispiel als überschaulich und nicht zu komplex. Beeindruckend fand ich auch, wie viele Informationen Herr Hoppe in diesen 50- minütigen Vortrag packte. Sehr gefallen hat mir, dass sich Herr Hoppe im Anschluß an den Vortrag die Zeit nahm, sich den Fragen sämtlicher Teilnehmer zu stellen.
Wer sich für die Slides des Vortrags interessiert, diese sind hier zu finden; ebenso findet sich das komplette Beispiel ausführlicher auf dieser Seite.
Der zweite Teil dieser Reihe findet am 11. 06. 2013 statt; die Anmeldung ist hier zu finden.

Verfasser: Martin Edelmann

Advertisements

Über hecogmbh

Die heco gmbh ist ein Handelshaus sowie ein Produzent für Fittings und Armaturen aus rostfreiem Edelstahl. Unsere Produkte werden im Maschinen-, Anlagen- und Fahrzeugbau sowohl in der chemischen Industrie als auch in der Nahrungsmittelindustrie eingesetzt. Mit mehreren Standorten europaweit sind wir immer in Ihrer Nähe.
Dieser Beitrag wurde unter Martin Edelmann abgelegt und mit , , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

2 Antworten zu Knockout.js für .NET Einsteiger

  1. Johannes Hoppe schreibt:

    Ich freue mich sehr über das ausführliche und positive Feedback! Danke sehr! 🙂

  2. Pingback: Developer-Media Webinar: Knockout.js für .NET-Entwickler » Johannes' Blog

Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s