Appar med ryggrad. Introduktion till JavaScriptramverket Backbone

Storlek: px

Starta visningen från sidan:

Download "Appar med ryggrad. Introduktion till JavaScriptramverket Backbone"

Ludvig Eliasson
för 8 år sedan
Visningar:

1 Appar med ryggrad Introduktion till JavaScriptramverket Backbone

2 Vanlig webbsida Databas

3 MVC - Model View Controller

4 MVC - Model View Controller

5 MVC

6 Backbone.js Ger struktur Bygger på MVC konceptet Tvingar inte till EN lösning

7 Backbone Jquery Backbone Underscore <!doctype html> <html> <head> <title>hv</title> </head> <body> <script src= type="text/javascript"></script> <script src= type="text/javascript"></script> <script src= type="text/javascript"></script> <script type="text/template" id="login-template"> <div id="loginwrap"> Användarnamn <br><input name="username" type="text" value="" /> <br>lösenord <br><input name="password" type="password" value="" /> <br><a href="/" class="login">logga in</a><br/> <div id="login-error" style="display:none;">inloggning misslyckad. <br/>felaktigt användarnamn eller lösenord.</div> </div> </script>

8 Model //Här deklarerar vi klassen Person som är en Model var Person = Backbone.Model.extend({ //Plats för kod });

9 Model //Här deklarerar vi klassen Person som är en Model var Person = Backbone.Model.extend({ //defaults är standardvärden som finns om man inte anger annat defaults: { name: 'Guest User', age: 23, occupation: 'Worker' }, //work är en egendefinierad funktion som man kan anropa med object.work() work: function(){ return this.get('name') + ' is working.'; } });

10 Använda Modellen //Vi skapar ett nytt objekt av klassen Person var nyperson = new Person; nyperson.set('name', 'Lisa') //uppdaterar name nyperson.set('age', 26) //uppdaterar age nyperson.set('occupation', 'kodare') //uppdaterar //occupation nyperson.work(); //Kommer att ge svaret Lisa is working

11 Dags för en View //Här deklarerar vi klassen PersonView som är en View var PersonView = Backbone.View.extend({ }); tagname: 'li' //Normalt ritar backbone upp vyer som //div, men här vill vi ha en lista

12 Ännu lite mer i vyn //Här deklarerar vi klassen PersonView som är en View var PersonView = Backbone.View.extend({ tagname: 'li', //Funktionen initialize körs första gången när man skapar ett objekt initialize: function () { this.render(); }, //Funktionen render ritar ut data från modellen på view (HTML sidan) render: function () { //$el är den lite magiska taggen i HTML-sidan där texten skrivs. this.$el.html(this.model.get('name') + ' (' + this.model.get('age') + ') - ' + this.model.get('occupation')); //this är för att komma till aktuell sida (jag) } });

13 Använda Vyn //Vi skapar ett nytt objekt av klassen Person var nyperson = new Person; //Ge personen ett namn nyperson.set('name', 'Frida'); //Vi skapar ett nytt objekt av klassen PersonView var minpersonvy = new PersonView({ model: nyperson }); //här ritar vi minpersonvy till webbsidan. Vanlig JQuery $(document.body).html(minpersonvy.el);

14 Templates render: function () { this.$el.html(this.model.get('name') + ' (' + this.model.get('age') + ') - ' + this.model.get('occupation')); } I stället i HTML sidan: <script id="persontemplate" type="text/template"> <strong><%= name %></strong> (<%= age %>) Yrke: <%= occupation %> </script>

15 Templates I JavaScript: //template bygger på biblioteket underscore, därav syntaxen //#persontemplate är det id som scriptet har i HTML sidan template: _.template( $('#persontemplate').html()), //tojson gör om Modellens objekt till ett format som //templaten förstår render: function () { this.$el.html( this.template(this.model.tojson()));

16 Händelser I HTML sidan: <script id="persontemplate" type="text/template"> <strong><%= name %></strong> (<%= age %>) Yrke: <%= occupation %> <input type="button" id="btnselect" value="välj" /> <input type="button" id="btncancel" value="avbryt" /> </script>

17 Händelser I JavaScript: var PersonView = Backbone.View.extend({ //events består av tre delar. 1. Vilken typ av händelse, 2. vilket Id det //gäller och 3. Vilken funktion som ska köras events: { 'click #btnselect' : 'showselect', 'click #btncancel' : 'showcancel' }, //den här funktionen hämtar värdet på name som finns i modellen showselect: function(){ alert("du klickade på Välj-knappen för " + this.model.get("name")); }, showcancel: function(){ alert("du klickade på Avbryt"); }, //osv

18 Övningar och kodexempel Bra länk

Relevanta dokument

<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>