Model-View-ViewModel (MVVM)      für HTML und JavaScript                     Norbert Eder   http://devtyr.norberteder.com ...
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-...
Vorteile Kein Code zum Setzen von Werten in  der UI bzw. zum Lesen daraus  notwendig Aufgeräumter und einfach zu wartend...
Binding DefinitionNotwendiges Attribut für                           Worauf wird gebunden?     die Bindung<div data-bind="...
Built-in Bindungen für Text   Folgende vordefinierten Bindungen für    die Kontrolle von Text und Darstellung    stehen z...
Built-in Bindungen fürForms   Für die Arbeit mit Formulare stehen    folgende Bindungen zur Verfügung:    click      even...
Beispiel   Daten aus dem ViewModel in einer View    anzeigen
Einfaches ViewModel   Definition eines ViewModels mit einigen    Eigenschaften    var personViewModel = {        firstNam...
Einfache View   In der View ist nun die Bindung mit dem    Attribut data-bind zu setzen    My first name is <span data-bi...
Bindung aktivieren   Damit data-bind ausgewertet wird (da    in HTML und dadurch für Browser    unbekannt), muss dieses a...
applyBindings Hintergrund Erster Parameter definiert das Objekt,  das gebunden wird. Ein optionaler zweiter Parameter  d...
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  Abon...
Observables   Bindung einer Schaltfläche an das    ViewModel zur Aktualisierung der Daten    <button data-bind="click: ch...
Observables   Änderungen am ViewModel werden    umgehend im UI wirksam, ohne    zusätzlichem Code
Observableslesen/schreiben personViewModel.firstName()  liefert den gesetzten Wert zurück personViewModel.firstName(Upd ...
Benachrichtigungen abonnieren    Sollte es notwendig sein, können     Änderungsbenachrichtigungen manuell     bezogen wer...
Das bisherige Beispiel ist unter  http://jsfiddle.net/eLmaN/            zu finden.
Ressourcen Home: http://knockoutjs.com/ Beispiele: http://knockoutjs.com/examples/ Dokumentation:  http://knockoutjs.co...
Nächste SlideShare
Wird geladen in …5
×

Knockout.js

2.009 Aufrufe

Veröffentlicht am

Model-View-ViewModel (MVVM) für HTML und JavaScript

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
2.009
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
508
Aktionen
Geteilt
0
Downloads
31
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Knockout.js

  1. 1. Model-View-ViewModel (MVVM) für HTML und JavaScript Norbert Eder http://devtyr.norberteder.com http://twitter.com/norberteder
  2. 2. Was bietet Knockout.js? Deklarative Bindungen Automatisches Aktualisieren der UI Tracking der Abhängigkeiten Templating
  3. 3. Unterstützte Browser Internet Explorer 6+ Firefox 2+ Chrome Safari etc.
  4. 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. 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. 6. Binding DefinitionNotwendiges 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. 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. 8. Built-in Bindungen fürForms Für die Arbeit mit Formulare stehen folgende Bindungen zur Verfügung: click event submit enable disable value hasfocus checked options selectedOptions uniqueName
  9. 9. Beispiel Daten aus dem ViewModel in einer View anzeigen
  10. 10. Einfaches ViewModel Definition eines ViewModels mit einigen Eigenschaften var personViewModel = { firstName: Norbert, lastName: Eder, blogUrl: http://devtyr.norberteder.com, blogName: DevTyr };
  11. 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. 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. 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. 14. Das bisherige Beispiel kann unter http://jsfiddle.net/GSNAj/ bezogen werden.
  15. 15. Beispiel Benachrichtigungen über Änderungen; Aktualisierung des UI bei Änderung der Daten im ViewModel
  16. 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. 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. 18. Observables Änderungen am ViewModel werden umgehend im UI wirksam, ohne zusätzlichem Code
  19. 19. Observableslesen/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. 20. Benachrichtigungen abonnieren  Sollte es notwendig sein, können Änderungsbenachrichtigungen manuell bezogen werden:personViewModel.firstName.subscribe(function(newValue) { alert("Updated first name: " + newValue);});
  21. 21. Das bisherige Beispiel ist unter http://jsfiddle.net/eLmaN/ zu finden.
  22. 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

×