1 / 28

Backbone.js

Backbone.js. Medien zwischen Technologie und Gesellschaft Dozent: Herr Prof. Dr. Manfred Thaller SS 13 Referent: Christian Braun. KLICK!. Durch Backbone.js weg von. Ein „KLICK“ = eine komplett neu geladene HTML- Seite einzig einzelne Bereiche werden ausgetauscht P opups werden angezeigt

rune
Download Presentation

Backbone.js

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. KLICK!

  3. Durch Backbone.js weg von.. Ein „KLICK“ = eine komplett neu geladene HTML- Seite • einzig einzelne Bereiche werden ausgetauscht • Popups werden angezeigt • komplexe Navigationsstrukturen und hin zu komplexen Webapplikationen..

  4. Problem bei Javascript Codes OHNE Backbone • nicht existente Struktur • es wird verzweifelt versucht, Daten synchron zwischen • => HTML- Benutzeroberfläche • => JavaScript- Logik • => Datenbank • auf dem Server zu halten! • „Spaghetti“ Code kann JEDER Ziele von Backbone.. ..Hilfestellung bei Erstellung von Applikationen! ..schaffen einer Struktur! ..plattformübergreifend! 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 Backbones „Model -View -Router Prinzip“!

  5. COLLECTIONS

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

  7. Auf in die Praxis- Das Kochbuch! KLICK MICH!

  8. HTML.. <!DOCTYPEhtml> <html> <head> <metahttp-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"> <scriptsrc="scripts/jquery-1.8.2.min.js"></script> <scriptsrc="bootstrap/js/bootstrap.min.js"></script> <scriptsrc="scripts/underscore-1.4.2.min.js"></script> <scriptsrc="scripts/backbone-0.9.2.js"></script>

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

  10. Model.. Keinerlei Funktionen zum Erstellen von HTML- Elementen! Neues Rezept erstellen varrecipe = newRecipe({ title: "Spiegeleier", ingredients: „2 Eier“, instructions:„Eier in heiße Pfanne geben. Warten“ })

  11. get.. varrecipe = newRecipe({ title: "Spiegeleier", ingredients: „2 Eier“, instructions:„Eier in heiße Pfanne geben. Warten “ }) vartitle = recipe.get(„title“); VIEW -Anzeige= „Spiegeleier“

  12. set.. varrecipe = newrecipe({ title: "Spiegeleier", ingredients: „2 Eier“, instructions:„Eier in heiße Pfannge“}) vartitle = recipe.set(„title“, „Schnitzel“); vartitle = recipe.get(„title“); VIEW -Anzeige= „Schnitzel“

  13. clear.. varrecipe = newrecipe({ title: "Spiegeleier", ingredients: „2 Eier“, instructions:„Eier in heiße Pfannge“}) vartitle = recipe.clear(„title“) vartitle = recipe.get(„title“) VIEW -Anzeige= „ “

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

  15. View.. Mehrere Views können das gleiche Model anzeigen! Ein View kann mehrere Models anzeigen! varEditView = Backbone.View.extend({ template: _.template($('#template-edit').html()), events: { 'clickinput[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'); returnfalse; }, render: function() { this.$el.html(this.template(this.model.toJSON())); returnthis; } });

  16. View.. PART 1 events: { 'clickinput[type="submit"]': 'save' }, • click- Events auf Submit- Buttons rufen save() -Funktion auf!

  17. View.. PART 2 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'); returnfalse; }, • speichert Werte aus Formular zurück ins Model • erzeugt finished -Event => Mitteilung, dass Rezeptbearbeitung beendet ist

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

  19. Router.. varCookbookApp = Backbone.Router.extend({ routes: { '': 'home', 'recipe/add': 'add', 'recipe/:id': 'display' }, home: function() { console.log(‘home‘) }; newHomeView(); add: function() { console.log(‚add‘) }; newAddView(); display: function() { /* ... */} newRecipeView }); URL nach „#“ wird ausgelesen Router gibt Änderung an View weiter

More Related