Medien zwischen Technologie und Gesellschaft Dozent: Herr Prof. Dr. Manfred Thaller SS 13 Referent: Christian Braun

KLICK!

Ein KLICK = eine komplett neu geladene HTML- Seite einzig einzelne Bereiche werden ausgetauscht Popups werden angezeigt komplexe Navigationsstrukturen

Grundlegendes.. JavaScript –Bibliothek/ Baukasten => Modelle und Funktionen werden bereitgestellt ausgelegt für die Entwicklung von Webapplikationen Verwendet das Underscore- Framework enthält >80 Add-on Funktionen für Javascript Verschiedene Plattformen werden bedient Ziele von Backbone....Hilfestellung bei Erstellung von Applikationen!..schaffen einer Struktur!..plattformübergreifend! Problem bei Javascript Codes OHNE Backbone o nicht existente Struktur o es wird verzweifelt versucht, Daten synchron zwischen => HTML- Benutzeroberfläche => JavaScript- Logik => Datenbank auf dem Server zu halten! o Spaghetti Code kann JEDER Backbones Model -View -Router Prinzip!

Models speichert Daten Eintrag in Datenbank neu angelegt verändert gelöscht Views Verantwortlich für die Anzeige des Inhalts Vermittlung zwischen Benutzer und Model Router Übernimmt Navigation innerhalb einer Seite Steuerzentrale COLLECTIONS

o View holt sich Daten vom Model, nicht vom Server o können beliebig erstellt, verändert und gelöscht werden o View aktualisiert sich selbstständig o Router/Model fordern change –Event Windows/Linux Oberfläche MODEL Weboberfläche VIEW 1 VIEW 2

Cookbook

var recipe = Backbone.Model.extend({ defaults: { title: "New recipe", ingredients: "", instructions: "" } }); Recipe -Objekte erben alle Methoden des Basis –Models Defaults: Standardwerte werden initialisiert

Neues Rezept erstellen var recipe = new Recipe({ title: "Spiegeleier", ingredients: 2 Eier, instructions:Eier in heiße Pfanne geben. Warten }) Keinerlei Funktionen zum Erstellen von HTML- Elementen!

var recipe = new Recipe({ title: "Spiegeleier", ingredients: 2 Eier, instructions:Eier in heiße Pfanne geben. Warten }) var title = recipe.get(title); VIEW -Anzeige= Spiegeleier

var recipe = new recipe({ title: "Spiegeleier", ingredients: 2 Eier, instructions:Eier in heiße Pfannge}) var title = recipe.set(title, Schnitzel); var title = recipe.get(title); VIEW -Anzeige= Schnitzel

var recipe = new recipe({ title: "Spiegeleier", ingredients: 2 Eier, instructions:Eier in heiße Pfannge}) var title = recipe.clear(title) var title = recipe.get(title) VIEW -Anzeige=

var Cookbook = Backbone.Collection.extend({ model: recipe }); dient dazu, mehrere Instanzen zusammenzufassen alle Rezepte befinden sich in einer Collection

var EditView = Backbone.View.extend({ template: _.template($('#template-edit').html()), events: { 'click input[type="submit"]': 'save' }, save: function() { this.model.set({ title: this.$el.find('#title').val(), ingredients: this.$el.find('#ingredients').val(), instructions: this.$el.find('#instructions').val() }); this.trigger('finished'); return false; }, render: function() { this.$el.html(this.template(this.model.toJSON())); return this; } }); Mehrere Views können das gleiche Model anzeigen! Ein View kann mehrere Models anzeigen!

events: { 'click input[type="submit"]': 'save' }, click- Events auf Submit- Buttons rufen save() -Funktion auf!

save: function() { this.model.set({ title: this.$el.find('#title').val(), ingredients: this.$el.find('#ingredients').val(), instructions: this.$el.find('#instructions').val() }); this.trigger('finished'); return false; }, speichert Werte aus Formular zurück ins Model erzeugt finished -Event => Mitteilung, dass Rezeptbearbeitung beendet ist

render: function() { this.$el.html(this.template(this.model.toJSON())); return this; erzeugt HTML–Code für den View Underscore –Template JSON: ordnet Model an=> Template kann zugreifen Andere Backbone Methoden können angefügt werden

var CookbookApp = Backbone.Router.extend({ routes: { '': 'home', 'recipe/add': 'add', 'recipe/:id': 'display' }, home: function() { console.log(home) }; new HomeView(); add: function() { console.log(add) }; new AddView(); display: function() { /*... */ } new RecipeView }); URL nach # wird ausgelesen Router gibt Änderung an View weiter