SlideShare ist ein Scribd-Unternehmen logo
Model-View-ViewModel (MVVM)
      für HTML und JavaScript




                     Norbert Eder
   http://devtyr.norberteder.com
   http://twitter.com/norberteder
Was bietet Knockout.js?
 Deklarative Bindungen
 Automatisches Aktualisieren der UI
 Tracking der Abhängigkeiten
 Templating
Unterstützte Browser
 Internet Explorer 6+
 Firefox 2+
 Chrome
 Safari
 etc.
Model-View-ViewModel
 Model
  Liegt am Server in der Businesslogik
  und wird meist per AJAX-Call bezogen.
 ViewModel
  Code-Repräsentation der Daten und
  Operationen
 View
  User Interface
Vorteile
 Kein Code zum Setzen von Werten in
  der UI bzw. zum Lesen daraus
  notwendig
 Aufgeräumter und einfach zu wartender
  Code
 Sehr einfach zu erlernen
 Unterstützung der gängigen Browser
 Einfache Integration in bestehende
  Websites
Binding Definition
Notwendiges Attribut für
                           Worauf wird gebunden?
     die Bindung



<div data-bind="visible: isMessageVisible">
     The message goes here.
</div>
                                   Was aus dem ViewModel
                                   soll gebunden werden?
Built-in Bindungen für Text
   Folgende vordefinierten Bindungen für
    die Kontrolle von Text und Darstellung
    stehen zur Verfügung

    visible         text            html
    css             style           attr
Built-in Bindungen für
Forms
   Für die Arbeit mit Formulare stehen
    folgende Bindungen zur Verfügung:

    click      event                submit
    enable     disable              value
    hasfocus checked                options
    selectedOptions
    uniqueName
Beispiel
   Daten aus dem ViewModel in einer View
    anzeigen
Einfaches ViewModel
   Definition eines ViewModels mit einigen
    Eigenschaften

    var personViewModel = {
        firstName: 'Norbert',
        lastName: 'Eder',
        blogUrl: 'http://devtyr.norberteder.com',
        blogName: 'DevTyr'
    };
Einfache View
   In der View ist nun die Bindung mit dem
    Attribut data-bind zu setzen

    My first name is <span data-bind="text:
    firstName"></span>.

    My last name is <span data-bind="text:
    lastName"></span>.

    Find my weblog @ <a data-bind="attr: { href: blogUrl,
    title: blogName }">here</a>.
Bindung aktivieren
   Damit data-bind ausgewertet wird (da
    in HTML und dadurch für Browser
    unbekannt), muss dieses aktiviert
    werden
    ko.applyBindings(personViewModel);
applyBindings Hintergrund
 Erster Parameter definiert das Objekt,
  das gebunden wird.
 Ein optionaler zweiter Parameter
  definiert den Bereich, der nach dem
  Attribut data-bind durchsucht wird.
  Wenn nicht gesetzt, bezieht sich die
  Bindung auf das gesamte Dokument.
Das bisherige Beispiel kann unter
    http://jsfiddle.net/GSNAj/
        bezogen werden.
Beispiel
   Benachrichtigungen über Änderungen;
    Aktualisierung des UI bei Änderung der
    Daten im ViewModel
Observables
 Werden die Eigenschaften als
  Oberservables definiert, senden diese
  Änderungsbenachrichtigungen an die
  Abonnenten.
 Das UI muss nicht verändert werden
  und bleibt funktionsfähig
    firstName: ko.observable('Norbert')
Observables
   Bindung einer Schaltfläche an das
    ViewModel zur Aktualisierung der Daten
    <button data-bind="click: changeItem">Change</button>



   Erweiterung ViewModel
    changeItem: function() {
        this.firstName('Norbert Updated');
    }
Observables
   Änderungen am ViewModel werden
    umgehend im UI wirksam, ohne
    zusätzlichem Code
Observables
lesen/schreiben
 personViewModel.firstName()
  liefert den gesetzten Wert zurück
 personViewModel.firstName('Upd
  ated') setzt den Wert auf „Updated“.
 personViewModel.firstName('Upd
  ated').lastName('Updated')
  aktualisiert firstName UND
  lastName.
Benachrichtigungen abonnieren
    Sollte es notwendig sein, können
     Änderungsbenachrichtigungen manuell
     bezogen werden:

personViewModel.firstName.subscribe(function(newValue) {
    alert("Updated first name: " + newValue);
});
Das bisherige Beispiel ist unter
  http://jsfiddle.net/eLmaN/
            zu finden.
Ressourcen
 Home: http://knockoutjs.com/
 Beispiele: http://knockoutjs.com/examples/
 Dokumentation:
  http://knockoutjs.com/documentation/introd
  uction.html
 Source:
  https://github.com/SteveSanderson/knocko
  ut
 Wiki:
  https://github.com/SteveSanderson/knocko
  ut/wiki

Weitere ähnliche Inhalte

Andere mochten auch

Karriere im Familienunternehmen der KOSTAL-Gruppe
Karriere im Familienunternehmen der KOSTAL-GruppeKarriere im Familienunternehmen der KOSTAL-Gruppe
Karriere im Familienunternehmen der KOSTAL-Gruppe
KOSTAL1912
 
Календарь Майя
Календарь МайяКалендарь Майя
Календарь МайяAnMut
 
Presentacion liderazgo
Presentacion liderazgoPresentacion liderazgo
Presentacion liderazgo
David Queche
 
Datenbanken
Datenbanken Datenbanken
Datenbanken mrx16
 
Herbst PR leicht gemacht
Herbst PR leicht gemachtHerbst PR leicht gemacht
Herbst PR leicht gemachtADENION GmbH
 
Proyecto desarrollo de competencias comunicativas en los docentes
Proyecto desarrollo de competencias comunicativas en los docentesProyecto desarrollo de competencias comunicativas en los docentes
Proyecto desarrollo de competencias comunicativas en los docentes
laura elena aragon hope
 
Social Media in Talententwicklung und Weiterbildung
Social Media in Talententwicklung und Weiterbildung Social Media in Talententwicklung und Weiterbildung
Social Media in Talententwicklung und Weiterbildung
Thomas Jenewein
 
Live Übertragungen mit Google Hangout
Live Übertragungen mit Google Hangout Live Übertragungen mit Google Hangout
Live Übertragungen mit Google Hangout
Corporate Learning & Change GmbH
 
Zahlen20bis100
Zahlen20bis100Zahlen20bis100
Zahlen20bis100
antvellop
 
Eva Kalbheim: Tabuthemen aufbrechen
Eva Kalbheim: Tabuthemen aufbrechenEva Kalbheim: Tabuthemen aufbrechen
Eva Kalbheim: Tabuthemen aufbrechen
Stefanie Kollenberg, Raabe Verlag
 
óSsos
óSsosóSsos
óSsos
maiteposino
 
Plural 091215040549-phpapp02
Plural 091215040549-phpapp02Plural 091215040549-phpapp02
Plural 091215040549-phpapp02AndyAustrich
 
The Biggest Secret - Geistige Weltstrukturen von Gerold Szonn
The Biggest Secret - Geistige Weltstrukturen von Gerold SzonnThe Biggest Secret - Geistige Weltstrukturen von Gerold Szonn
The Biggest Secret - Geistige Weltstrukturen von Gerold Szonn
Gerold Szonn
 
Infopaq Medienanalyse: Nachhaltigkeit von Discountern (16.02.2011)
Infopaq Medienanalyse: Nachhaltigkeit von Discountern (16.02.2011)Infopaq Medienanalyse: Nachhaltigkeit von Discountern (16.02.2011)
Infopaq Medienanalyse: Nachhaltigkeit von Discountern (16.02.2011)
Infopaq Deutschland
 
Diseño Curricular
Diseño CurricularDiseño Curricular
Diseño Curricularperibolismo
 
E-Learning Design – von Video-basiertem Lernen, Gamification bis Responsive D...
E-Learning Design – von Video-basiertem Lernen, Gamification bis Responsive D...E-Learning Design – von Video-basiertem Lernen, Gamification bis Responsive D...
E-Learning Design – von Video-basiertem Lernen, Gamification bis Responsive D...
Thomas Jenewein
 

Andere mochten auch (17)

Karriere im Familienunternehmen der KOSTAL-Gruppe
Karriere im Familienunternehmen der KOSTAL-GruppeKarriere im Familienunternehmen der KOSTAL-Gruppe
Karriere im Familienunternehmen der KOSTAL-Gruppe
 
Календарь Майя
Календарь МайяКалендарь Майя
Календарь Майя
 
Presentacion liderazgo
Presentacion liderazgoPresentacion liderazgo
Presentacion liderazgo
 
Datenbanken
Datenbanken Datenbanken
Datenbanken
 
Herbst PR leicht gemacht
Herbst PR leicht gemachtHerbst PR leicht gemacht
Herbst PR leicht gemacht
 
Proyecto desarrollo de competencias comunicativas en los docentes
Proyecto desarrollo de competencias comunicativas en los docentesProyecto desarrollo de competencias comunicativas en los docentes
Proyecto desarrollo de competencias comunicativas en los docentes
 
Social Media in Talententwicklung und Weiterbildung
Social Media in Talententwicklung und Weiterbildung Social Media in Talententwicklung und Weiterbildung
Social Media in Talententwicklung und Weiterbildung
 
Live Übertragungen mit Google Hangout
Live Übertragungen mit Google Hangout Live Übertragungen mit Google Hangout
Live Übertragungen mit Google Hangout
 
Zahlen20bis100
Zahlen20bis100Zahlen20bis100
Zahlen20bis100
 
Eva Kalbheim: Tabuthemen aufbrechen
Eva Kalbheim: Tabuthemen aufbrechenEva Kalbheim: Tabuthemen aufbrechen
Eva Kalbheim: Tabuthemen aufbrechen
 
óSsos
óSsosóSsos
óSsos
 
Plural 091215040549-phpapp02
Plural 091215040549-phpapp02Plural 091215040549-phpapp02
Plural 091215040549-phpapp02
 
The Biggest Secret - Geistige Weltstrukturen von Gerold Szonn
The Biggest Secret - Geistige Weltstrukturen von Gerold SzonnThe Biggest Secret - Geistige Weltstrukturen von Gerold Szonn
The Biggest Secret - Geistige Weltstrukturen von Gerold Szonn
 
Infopaq Medienanalyse: Nachhaltigkeit von Discountern (16.02.2011)
Infopaq Medienanalyse: Nachhaltigkeit von Discountern (16.02.2011)Infopaq Medienanalyse: Nachhaltigkeit von Discountern (16.02.2011)
Infopaq Medienanalyse: Nachhaltigkeit von Discountern (16.02.2011)
 
Diseño Curricular
Diseño CurricularDiseño Curricular
Diseño Curricular
 
E-Learning Design – von Video-basiertem Lernen, Gamification bis Responsive D...
E-Learning Design – von Video-basiertem Lernen, Gamification bis Responsive D...E-Learning Design – von Video-basiertem Lernen, Gamification bis Responsive D...
E-Learning Design – von Video-basiertem Lernen, Gamification bis Responsive D...
 
F U N C I O N S
F U N C I O N SF U N C I O N S
F U N C I O N S
 

Ähnlich wie Knockout.js

MVVM mit WPF
MVVM mit WPFMVVM mit WPF
MVVM mit WPF
Hendrik Lösch
 
Präsentation webservices
Präsentation webservicesPräsentation webservices
Präsentation webservices
xxtesaxx
 
dotnet Cologne 2013 - Windows Azure Mobile Services
dotnet Cologne 2013 - Windows Azure Mobile Servicesdotnet Cologne 2013 - Windows Azure Mobile Services
dotnet Cologne 2013 - Windows Azure Mobile ServicesSascha Dittmann
 
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
Oliver Hader
 
Java-Webanwendungen mit Vaadin 8
Java-Webanwendungen mit Vaadin 8Java-Webanwendungen mit Vaadin 8
Java-Webanwendungen mit Vaadin 8
gedoplan
 
Große Applikationen mit AngularJS
Große Applikationen mit AngularJSGroße Applikationen mit AngularJS
Große Applikationen mit AngularJS
Sebastian Springer
 
PHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzePHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-Ansätze
Ralf Lütke
 
Lean web architecture mit jsf 2.0, cdi & co.
Lean web architecture mit jsf 2.0, cdi & co.Lean web architecture mit jsf 2.0, cdi & co.
Lean web architecture mit jsf 2.0, cdi & co.
adesso AG
 
Net@night asp.net mvc
Net@night asp.net mvcNet@night asp.net mvc
Net@night asp.net mvc
Digicomp Academy AG
 
TYPO3 CMS 7.1 - Die Neuerungen - pluswerk
TYPO3 CMS 7.1 - Die Neuerungen - pluswerkTYPO3 CMS 7.1 - Die Neuerungen - pluswerk
TYPO3 CMS 7.1 - Die Neuerungen - pluswerk
die.agilen GmbH
 
YAFOWIL - Webformulare in Python ohne Kopfschmerzen
YAFOWIL - Webformulare in Python ohne KopfschmerzenYAFOWIL - Webformulare in Python ohne Kopfschmerzen
YAFOWIL - Webformulare in Python ohne KopfschmerzenJens Klein
 
Einführung in Windows Presentation Foundation
Einführung in Windows Presentation FoundationEinführung in Windows Presentation Foundation
Einführung in Windows Presentation Foundation
chmoser79
 
Enterprise UI
Enterprise UIEnterprise UI
Enterprise UI
gedoplan
 
DACHNUG50 LeapTippsAndTricks.pdf
DACHNUG50 LeapTippsAndTricks.pdfDACHNUG50 LeapTippsAndTricks.pdf
DACHNUG50 LeapTippsAndTricks.pdf
DNUG e.V.
 
Backbase Intro
Backbase IntroBackbase Intro
Backbase Intro
Béla Varga
 
Workshop Vue js
Workshop Vue jsWorkshop Vue js
Workshop Vue js
Hendrik Lösch
 
Open Source im Unternehmen - Active Directory Integration in check_mk
Open Source im Unternehmen - Active Directory Integration in check_mkOpen Source im Unternehmen - Active Directory Integration in check_mk
Open Source im Unternehmen - Active Directory Integration in check_mkTorsten Maus
 
Domain Driven Design in Rails
Domain Driven Design in RailsDomain Driven Design in Rails
Domain Driven Design in Rails
Angelo Maron
 
Legacy Code refaktorisieren
Legacy Code refaktorisierenLegacy Code refaktorisieren
Legacy Code refaktorisieren
Hendrik Lösch
 

Ähnlich wie Knockout.js (20)

MVVM mit WPF
MVVM mit WPFMVVM mit WPF
MVVM mit WPF
 
MVVM Pattern
MVVM Pattern MVVM Pattern
MVVM Pattern
 
Präsentation webservices
Präsentation webservicesPräsentation webservices
Präsentation webservices
 
dotnet Cologne 2013 - Windows Azure Mobile Services
dotnet Cologne 2013 - Windows Azure Mobile Servicesdotnet Cologne 2013 - Windows Azure Mobile Services
dotnet Cologne 2013 - Windows Azure Mobile Services
 
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
Vor- und Nachteile von Web Components mit Polymer gegenüber AngularJS ohne P...
 
Java-Webanwendungen mit Vaadin 8
Java-Webanwendungen mit Vaadin 8Java-Webanwendungen mit Vaadin 8
Java-Webanwendungen mit Vaadin 8
 
Große Applikationen mit AngularJS
Große Applikationen mit AngularJSGroße Applikationen mit AngularJS
Große Applikationen mit AngularJS
 
PHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-AnsätzePHP-Module in statischen Seiten - Architektur-Ansätze
PHP-Module in statischen Seiten - Architektur-Ansätze
 
Lean web architecture mit jsf 2.0, cdi & co.
Lean web architecture mit jsf 2.0, cdi & co.Lean web architecture mit jsf 2.0, cdi & co.
Lean web architecture mit jsf 2.0, cdi & co.
 
Net@night asp.net mvc
Net@night asp.net mvcNet@night asp.net mvc
Net@night asp.net mvc
 
TYPO3 CMS 7.1 - Die Neuerungen - pluswerk
TYPO3 CMS 7.1 - Die Neuerungen - pluswerkTYPO3 CMS 7.1 - Die Neuerungen - pluswerk
TYPO3 CMS 7.1 - Die Neuerungen - pluswerk
 
YAFOWIL - Webformulare in Python ohne Kopfschmerzen
YAFOWIL - Webformulare in Python ohne KopfschmerzenYAFOWIL - Webformulare in Python ohne Kopfschmerzen
YAFOWIL - Webformulare in Python ohne Kopfschmerzen
 
Einführung in Windows Presentation Foundation
Einführung in Windows Presentation FoundationEinführung in Windows Presentation Foundation
Einführung in Windows Presentation Foundation
 
Enterprise UI
Enterprise UIEnterprise UI
Enterprise UI
 
DACHNUG50 LeapTippsAndTricks.pdf
DACHNUG50 LeapTippsAndTricks.pdfDACHNUG50 LeapTippsAndTricks.pdf
DACHNUG50 LeapTippsAndTricks.pdf
 
Backbase Intro
Backbase IntroBackbase Intro
Backbase Intro
 
Workshop Vue js
Workshop Vue jsWorkshop Vue js
Workshop Vue js
 
Open Source im Unternehmen - Active Directory Integration in check_mk
Open Source im Unternehmen - Active Directory Integration in check_mkOpen Source im Unternehmen - Active Directory Integration in check_mk
Open Source im Unternehmen - Active Directory Integration in check_mk
 
Domain Driven Design in Rails
Domain Driven Design in RailsDomain Driven Design in Rails
Domain Driven Design in Rails
 
Legacy Code refaktorisieren
Legacy Code refaktorisierenLegacy Code refaktorisieren
Legacy Code refaktorisieren
 

Knockout.js

  • 1. Model-View-ViewModel (MVVM) für HTML und JavaScript Norbert Eder http://devtyr.norberteder.com http://twitter.com/norberteder
  • 2. Was bietet Knockout.js?  Deklarative Bindungen  Automatisches Aktualisieren der UI  Tracking der Abhängigkeiten  Templating
  • 3. Unterstützte Browser  Internet Explorer 6+  Firefox 2+  Chrome  Safari  etc.
  • 4. Model-View-ViewModel  Model Liegt am Server in der Businesslogik und wird meist per AJAX-Call bezogen.  ViewModel Code-Repräsentation der Daten und Operationen  View User Interface
  • 5. Vorteile  Kein Code zum Setzen von Werten in der UI bzw. zum Lesen daraus notwendig  Aufgeräumter und einfach zu wartender Code  Sehr einfach zu erlernen  Unterstützung der gängigen Browser  Einfache Integration in bestehende Websites
  • 6. Binding Definition Notwendiges Attribut für Worauf wird gebunden? die Bindung <div data-bind="visible: isMessageVisible"> The message goes here. </div> Was aus dem ViewModel soll gebunden werden?
  • 7. Built-in Bindungen für Text  Folgende vordefinierten Bindungen für die Kontrolle von Text und Darstellung stehen zur Verfügung visible text html css style attr
  • 8. Built-in Bindungen für Forms  Für die Arbeit mit Formulare stehen folgende Bindungen zur Verfügung: click event submit enable disable value hasfocus checked options selectedOptions uniqueName
  • 9. Beispiel  Daten aus dem ViewModel in einer View anzeigen
  • 10. Einfaches ViewModel  Definition eines ViewModels mit einigen Eigenschaften var personViewModel = { firstName: 'Norbert', lastName: 'Eder', blogUrl: 'http://devtyr.norberteder.com', blogName: 'DevTyr' };
  • 11. Einfache View  In der View ist nun die Bindung mit dem Attribut data-bind zu setzen My first name is <span data-bind="text: firstName"></span>. My last name is <span data-bind="text: lastName"></span>. Find my weblog @ <a data-bind="attr: { href: blogUrl, title: blogName }">here</a>.
  • 12. Bindung aktivieren  Damit data-bind ausgewertet wird (da in HTML und dadurch für Browser unbekannt), muss dieses aktiviert werden ko.applyBindings(personViewModel);
  • 13. applyBindings Hintergrund  Erster Parameter definiert das Objekt, das gebunden wird.  Ein optionaler zweiter Parameter definiert den Bereich, der nach dem Attribut data-bind durchsucht wird. Wenn nicht gesetzt, bezieht sich die Bindung auf das gesamte Dokument.
  • 14. Das bisherige Beispiel kann unter http://jsfiddle.net/GSNAj/ bezogen werden.
  • 15. Beispiel  Benachrichtigungen über Änderungen; Aktualisierung des UI bei Änderung der Daten im ViewModel
  • 16. Observables  Werden die Eigenschaften als Oberservables definiert, senden diese Änderungsbenachrichtigungen an die Abonnenten.  Das UI muss nicht verändert werden und bleibt funktionsfähig firstName: ko.observable('Norbert')
  • 17. Observables  Bindung einer Schaltfläche an das ViewModel zur Aktualisierung der Daten <button data-bind="click: changeItem">Change</button>  Erweiterung ViewModel changeItem: function() { this.firstName('Norbert Updated'); }
  • 18. Observables  Änderungen am ViewModel werden umgehend im UI wirksam, ohne zusätzlichem Code
  • 19. Observables lesen/schreiben  personViewModel.firstName() liefert den gesetzten Wert zurück  personViewModel.firstName('Upd ated') setzt den Wert auf „Updated“.  personViewModel.firstName('Upd ated').lastName('Updated') aktualisiert firstName UND lastName.
  • 20. Benachrichtigungen abonnieren  Sollte es notwendig sein, können Änderungsbenachrichtigungen manuell bezogen werden: personViewModel.firstName.subscribe(function(newValue) { alert("Updated first name: " + newValue); });
  • 21. Das bisherige Beispiel ist unter http://jsfiddle.net/eLmaN/ zu finden.
  • 22. Ressourcen  Home: http://knockoutjs.com/  Beispiele: http://knockoutjs.com/examples/  Dokumentation: http://knockoutjs.com/documentation/introd uction.html  Source: https://github.com/SteveSanderson/knocko ut  Wiki: https://github.com/SteveSanderson/knocko ut/wiki