Egy single page web alkalmazás vagy egy bonyolult felhasználói interfész megépítése hihetetlenül nehézzé válik már csak egyszerűen a jQuery vagy a MooTools használatával. A probléma az, hogy a standard JavaScript könyvtárak nagyszerűek abban, amit csinálnak, amire valók - és anélkül, hogy észrevennénk, felépíthetünk egy egész applikációt mindenféle formális struktúra nélkül. Könnyűszerrel változtathatjuk az applikációnkat jQuery hívások beágyazott halmazává, miközben mindegyik hívás hozzá van kötve egy adott DOM elemhez.
Azt nem kell elmagyarázni, hogy miért rossz ötlet egy applikáció megépítése bármilyen struktúra nélkül. Persze bármikor feltalálhatjuk a saját módszerünket az applikációnk strukturalizációjára, de akkor elvesztjük az előnyeit az open source közösségnek.
A Backbone.js arra törekszik, hogy a kommunikáció a szerverrel teljes mértékben egy RESTful rendszeren (API-n) kersztül történjen. Azokat a rendszereket, amelyek eleget tesznek a REST megszorításainak, "RESTful"-nak nevezik. A REST (Representational State Transfer) egy szoftverarchitektúra típus elosztott hipermédia rendszerek számára, amilyen például a világháló. A Representational State Transfer kifejezést Roy Fielding vezette be és definiálta 2000-ben a doktori disszertációjában.Fielding egyike a HTTP (HyperText Transfer Protocol) specifikáció szerkesztőinek. A web manapság egy új trend felé kezd hajlani. E szerint minden adat és tartalom egy API-nak lesz kitéve. Ennek oka, hogy már nem a böngésző az egyedüli kliens, mostanság újabb eszközök jelentek meg: mobil eszközök, tabletek, Google Goggles stb.
A Backbone egy hihetetlenül kicsi könyvtár ahhoz képest, hogy mennyi funkcionalitást és struktúrát képes adni. Ez lényegében egy MVC a kliensnek és lehetővé teszi számunkra, hogy a kódunk moduláris legyen. Az Interneten fellelhető tutorialok könnyen érthetőek és a Backbone.js laza természetének köszönhetően fokozatosan be is építhető a jelenlegi vagy a jövőbeni projektjeinkbe.
A Backbone.js 4 fő része:
- View
- Model
- Collection
- Router
View
A Backbone view-kat arra használjuk, hogy megmutassuk az aplikációnk adatmodell kinézetét. Ezen kívül a view-kat hasznájuk még különféle események(event) figyelésére és a megfelelő reagálásra. A Backbone.js hivatalos DOM manipulátoraként a jQuery-t használja, de használhatunk ezen kívül MooTools-t vagy Sizzle-t is.
View példa:
1 SearchView = Backbone.View.extend({
2 initialize: function(){
3 alert("Helló szia!");
4 }
5 });
6
7 var search_view = new SearchView();
Az "el" tulajdonság a DOM objektumra hivatkozik, amit létrehoztunk a böngészőben. Minden Backbone.js view rendelkezik egy "el" tulajdonsággal. Ha ezt nem definiáljuk, akkor a Backbone.js maga létrehoz egyet, ez esetben egy üres div elemet kapunk.
1 <div id="search_container"></div>
2
3 <script type="text/javascript">
4 SearchView = Backbone.View.extend({
5 initialize: function(){
6 alert("Helló szia!");
7 }
8 });
9
10 var search_view = new SearchView({ el: $("#search_container") });
11 </script>
Model
Az Interneten az MVC definíciója annyi féle képpen megjelenik, hogy nehéz pontosan megmondani a modell szerepét. A Backbone.js megalkotóinak egy eléggé tiszta képe van arról, hogy a modellnek mit is kéne reprezentálnia a Backbone.js-ben:
A modell a szíve bármelyik JavaScript applikációnak. Tartalmazza az összes interaktív adatot és az ezt körülvevő logikát: konverziók, validációk, kiszámított tulajdonságok és hozzáférés vezérlés.
Modell példa:
1 Person = Backbone.Model.extend({
2 initialize: function(){
3 alert("Üdv a világban!");
4 }
5 });
6
7 var person = new Person;
Az initialize() triggerelve van minden esetben, amikor egy új példányt készítünk a modellből. A modellek, view-k és collection-k ugyanúgy működnek ebből a szempontból.
A modell egyes attribútumait megadhatjuk példányosításkor vagy a set() metódus segítségével állíthatjuk be később:
1 var person = new Person({ name: "Thomas", age: 67});
2
3 var person = new Person();
4 person.set({ name: "Thomas", age: 67});
A modell egyes attribútumait a get() metódus segítségével kérhetjük le:
1 var person = new Person({ name: "Thomas", age: 67, child: "Ryan"});
2
3 var age = person.get("age"); // 67
4 var name = person.get("name"); // "Thomas"
5 var child = person.get("child"); // "Ryan"
Egyes esetekben alapértelmnezett értékeket is szeretnénk megadni. Ezt a következő fajta képpen érhetjük el:
1 Person = Backbone.Model.extend({
2 defaults: {
3 name: "Fetus",
4 age: 0,
5 child: ""
6 },
7 initialize: function(){
8 alert("Üdv a világban!");
9 }
10 });
11
12 var person = new Person({ name: "Thomas", age: 67, child: "Ryan"});
13
14 var age = person.get("age"); // 67
15 var name = person.get("name"); // "Thomas"
16 var child = person.get("child"); // "Ryan"
Collection
A Backbone kollekciók egyszerűen modellek rendezett set-je. Például:
- Model: Student, Collection: ClassStudents
- Model: Todo Item, Collection: Todo List
- Model: Animals, Collection: Zoo
- Model: Student, Collection: Gym Class
- Model: Student, Collection: Art Class
- Model: Student, Collection: English Class
Model/Collection példa:
1 var Song = Backbone.Model.extend({
2 initialize: function(){
3 console.log("Music is the answer");
4 }
5 });
6
7 var Album = Backbone.Collection.extend({
8 model: Song
9 });
Egy komplexebb példa kollekcióra:
1 var Song = Backbone.Model.extend({
2 defaults: {
3 name: "Not specified",
4 artist: "Not specified"
5 },
6 initialize: function(){
7 console.log("Music is the answer");
8 }
9 });
10
11 var Album = Backbone.Collection.extend({
12 model: Song
13 });
14
15 var song1 = new Song({ name: "How Bizarre", artist: "OMC" });
16 var song2 = new Song({ name: "Sexual Healing", artist: "Marvin Gaye" })\
17 ;
18 var song3 = new Song({ name: "Talk It Over In Bed", artist: "OMC" });
19
20 var myAlbum = new Album([ song1, song2, song3]);
21 console.log( myAlbum.models ); // [song1, song2, song3]
Router
A Backbone router-eket az applikációnkban használt URL-knél használjuk ki. A definiált routerek közt mindig kéne lennie egy útvonalnak és egy függvénynek, hogy feltérképezze az egyes útvonalakt. Érdemes megjegyezni, hogy a router a "#" után mindent figyelembe vesz!
Az alábbi kód egy példa a routerek használatára és már dinamikus útvonal részletet is tartalmaz:
1 var AppRouter = Backbone.Router.extend({
2 routes: {
3 "posts/:id": "getPost",
4 "*actions": "defaultRoute"
5
6 }
7 });
8
9 // Instantiate the router
10 var app_router = new AppRouter;
11 app_router.on("route:getPost", function (id) {
12
13 alert( "Get post number " + id );
14 });
15 app_router.on("route:defaultRoute", function (actions) {
16 alert( actions );
17 });
18 // Start Backbone history a necessary step for bookmarkable URL"s
19 Backbone.history.start();