Appar med ryggrad Introduktion till JavaScriptramverket Backbone
Vanlig webbsida Databas
MVC - Model View Controller
MVC - Model View Controller
MVC
Backbone.js Ger struktur Bygger på MVC konceptet Tvingar inte till EN lösning
Backbone Jquery Backbone Underscore <!doctype html> <html> <head> <title>hv</title> </head> <body> <script src= http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script> <script src= http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js" type="text/javascript"></script> <script src= http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js" 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>
Model //Här deklarerar vi klassen Person som är en Model var Person = Backbone.Model.extend({ //Plats för kod });
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.'; } });
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
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
Ä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) } });
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);
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>
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()));
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>
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
Övningar och kodexempel http://mhandelsplatsen.se/doc/backbone1.zip http://mhandelsplatsen.se/doc/backbone1.pdf Bra länk http://www.codebeerstartups.com/2012/12/a-complete-guide-for-learningbackbone-js