medien zwischen technologie und gesellschaft dozent: herr prof. dr. manfred thaller ss 13 referent:...
TRANSCRIPT
Backbone.js
Medien zwischen Technologie und GesellschaftDozent: Herr Prof. Dr. Manfred ThallerSS 13Referent: Christian Braun
KLICK!
Ein „KLICK“ = eine komplett neu geladene HTML- Seite
einzig einzelne Bereiche werden ausgetauscht Popups werden angezeigt komplexe Navigationsstrukturen
Durch Backbone.js weg von..
und hin zu komplexen Webapplikationen..
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 Strukturo 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 werdeno View aktualisiert sich selbstständig
o Router/Model fordern „change –Event“
Windows/Linux
Oberfläche
MODEL
Weboberfläche
VIEW 1
VIEW 2
Auf in die Praxis- Das Kochbuch!
KLICK MICH!
<!DOCTYPE html> <html><head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<title>Cookbook</title> <link href="bootstrap/css/bootstrap.min.css"
rel="stylesheet" media="screen"> <link rel="stylesheet" type="text/css"
href="styles/main.css">
<script src="scripts/jquery-1.8.2.min.js"></script> <script src="bootstrap/js/bootstrap.min.js"></script> <script src="scripts/underscore-1.4.2.min.js"></script> <script src="scripts/backbone-0.9.2.js"></script>
HTML..
var recipe = Backbone.Model.extend({
defaults: {
title: "New recipe",
ingredients: "",
instructions: ""
}
});
Model..
„Recipe“ -Objekte erben alle Methoden des Basis –ModelsDefaults: Standardwerte werden initialisiert
Neues Rezept erstellen
var recipe = new Recipe({
title: "Spiegeleier",
ingredients: „2 Eier“,
instructions:„Eier in heiße Pfanne geben. Warten“
})
Model.. 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“
get..
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“
set..
clear..
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= „ “
Collection..
var Cookbook = Backbone.Collection.extend({
model: recipe
});
dient dazu, mehrere Instanzen zusammenzufassen alle Rezepte befinden sich in einer Collection
View..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!
View.. PART 1
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
View.. PART 2
render: function() {
this.$el.html(this.template(this.model.toJSON()));
return this;
erzeugt HTML–Code für den ViewUnderscore –TemplateJSON: ordnet Model an=> Template kann zugreifenAndere Backbone Methoden können angefügt werden
View.. PART 3
Router..
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