Tutorial Backbone.js w pigułce. Część 1/2.

backbone

Poziom średnio-zaawansowany

Backbone.js to dość popularna biblioteka JavaScript, wykorzystywana do tworzenia aplikacji internetowych na pojedynczej stronie (Single-page application).

Biblioteka została zbudowana z użyciem interfejsu RESTful JSON i bazuje na wzorcu model–view–presenter (MVP). Twórcą biblioteki jest Jeremy Ashkenas – autor underscore.js i CoffeeScript.

Tutorial Backbone.js – wprowadzenie

Backbone.js potrzebuje do działania jednej zależności – Underscore.js (>= 1.5.0).

Przykład – praca z Backbone.js

var object = {};
_.extend(object, Backbone.Events);

object.on("alert", function(msg) {
  alert("Triggered " + msg);
});

object.trigger("alert", "an event");

Biblioteka wprowadza nas na inny poziom abstrakcji. Pracując z nią uczymy się patrzeć na naszą aplikację Web w oderwaniu od JavaScript DOM.

Z Backbone reprezentujemy nasze dane jako model, który może być tworzony, weryfikowany (walidacja), kasowany czy też zapisywany na serwerze.

Backbone.js posiada cztery podstawowe koncepcje (warstwy):

– Backbone.Model

– Backbone.View

– Backbone.Router

– Backbone.Collection.

Wydawnictwo Strefa Kursów

Modele – Backbone.Model

Aplikacja zaczyna się w tym miejscu. Model to warstwa potrzebna do manipulowania danymi i ich reprezentacji w aplikacji.

Przykład – użycie modelu:

var artist = new Backbone.Model({
  firstName: "John",
  lastName: "Doe III"
});

artist.set({birthday: "December 14, 1987"});

alert(JSON.stringify(artist));

Przykład – konstruujemy model z inicjalizacją i wartościami domyślnymi:

Book = Backbone.Model.extend({
  initialize: function() {
    console.log('Creating new book');
  },
  defaults: {
    name: 'JavaScript Book',
    author: 'Me'
  }
});

Aby uruchomić przykłady potrzeba dołączyć biblioteki. Podstawowy szablon aplikacji dostępny tutaj:

http://directcode.eu/samples/backbonejs-tutorial-001.zip

Niektóre zdarzenia wyświetlane są jako alert, inne w konsoli (np. Firebuga).

Pobieranie wartości atrybutów

Atrybuty z obiektu modelu mogą zostać pobrane w prosty sposób dzięki funkcji .get(„attr_name”).

var myBook = new Book();
alert(myBook.get('name'));
alert(myBook.get('author'));
alert(myBook.get('dummy') || 'No attribute');

Usuwanie atrybutów

W przypadku gdy potrzebujemy usunąć niepotrzebny już atrybut z modelu, używamy funkcji .unset(„attr_name”).

...
myBook.unset('name');
alert(myBook.get('name')); // undefined
...

Klonowanie modelu

Aby sklonować model (utworzyć kopię), posłużymy się funkcją .clone():

myBook.clone();

Dodawanie funkcji – rozszerzanie modelu

Model możemy rozszerzyć także o funkcje operujące na danych i wykonujące inne operacje.

Book = Backbone.Model.extend({
  initialize: function() {
    console.log('Creating new book');
  },
  defaults: {
    name: 'JavaScript Book',
    author: 'Me',
    when: '2014'
  },
  showInfo: function() {
    alert('INFO: ' + this.get('name') + ' in ' + this.get('when'));
  }

});

W ten sposób dodana funkcja będzie dostępna dla wszystkich instancji obiektu Book:

myBook.showInfo();

Interakcja z serwerem

Modeli możemy użyć do reprezentowania danych przechowywanych po stronie serwera, a działania na nich wykonywane będą widziane jako operacje REST.

Przykład – tworzenie nowego użytkownika:

var UserModel = Backbone.Model.extend({
  urlRoot: '/user',
  defaults: {
    name: '',
    email: ''
  }
});

var user = new Usermodel();
// note: no "id" here
var userDetails = {
  name: 'John',
  email: 'johndoe@gmail.com'
};

// we perform POST /user with data
// the server should save the data and return the new "id"
user.save(userDetails, {
  success: function (user) {
    alert(user.toJSON());
  }
});

Aby zatem stworzyć nowego użytkownika i zapisać go na serwerze, tworzymy nową instancję, a następnie wywołujemy metodę save().

Model rozpoznawany jest po atrybucie „id”, więc jeśli ten „ma wartość” null, Backbone.js wyśle POST request do serwera (urlRoot). Do obsługi po stronie serwera możemy wykorzystać np. node.js czy też PHP.

Przykładowe dane: 1, ‚John’, ‚johndoe@gmail.com

Get – Pobieranie modelu

Gdy tworzymy instancję obiektu z podanym id, Backbone.js automatycznie wykona pobranie danych (urlRoot + ‚/id’ zgodnie z konwencjami RESTful).

Przykład:

var user = new Usermodel({id: 1});

// GET /user/1
// the server should return the id, name and email from the DB
user.fetch({
  success: function (user) {
    alert(user.toJSON());
  }
});

Update – aktualizacja modelu

Mając model istniejący na serwerze, możemy go zaktualizować metodą PUT.

Przykład:

var user = new Usermodel({
  id: 1,
  name: 'John',
  email: 'johndoe@gmail.com'
});

// let's try to update the data on the server
// PUT /user/1: `{name: 'Gregory', email: 'gregdoe@gmail.com'}`

user.save({name: 'Gregory'}, {
  success: function (model) {
    alert(user.toJSON());
  }
});

Delete – usuwanie modelu

Usuwaliśmy atrybuty, usuńmy teraz cały model (DELETE /user/id).

Przykład:


// here we have set the id of the model
var user = new Usermodel({
  id: 1,
  name: 'John',
  email: 'johndoe@gmail.com'
});

user.destroy({
  success: function () {
    alert('Destroyed');
  }
});

Tips and Tricks – walidacja modelu przed zapisaniem

Poniżej przykład dodania walidacji danych przed zapisaniem modelu.


Person = Backbone.Model.extend({

  validate: function(attributes) {
    if (attributes.age < 0 && attributes.name != "Greg") {
      return "Don't cheat!";
    }
  },

  initialize: function() {
    alert("Welcome");
    this.bind("error", function(model, error) {
      alert(error);
    });
  }
});

var person = new Person;
person.set({ name: "Test", age: -1 }); 
// -> displays error

var person = new Person;
person.set({ name: "Greg", age: -1 });
// -> ok

Kolekcje – Backbone.Collection

Modele a kolekcje? Czym jest kolekcja? Jest to po prostu uporządkowany zbiór modeli.

Przykład – użycie kolekcji:

var Photo = Backbone.Model.extend({
  initialize: function() {
    console.log("Nice picture");
  }
});

var Gallery = Backbone.Collection.extend({
  model: Photo
});

Zastosowanie to np.:

Model: Photo – Collection: Gallery
Model: Animal – Collection: Zoo

Przykład – budowanie kolekcji i wypełnianie danymi:


// model
var Song = Backbone.Model.extend({
  defaults: {
    name: "Not specified",
    artist: "Not specified"
  },

  initialize: function() {
    console.log("Music!");
  }
});

// collection
var Album = Backbone.Collection.extend({
  model: Song
});

// populate a collection with data
var song1 = new Song({ name: "Song 1", artist: "CodersBand" });
var song2 = new Song({ name: "Testing it!", artist: "Tester" });

var myAlbum = new Album([song1, song2]);
console.log(myAlbum.models);

Prosto i sensem. Nasza aplikacja szybko nabiera kształtów.

Na dziś to wszystko.

Tutorial Backbone.js – podsumowanie

Jeśli szukamy nowoczesnego frameworka web, z pewnością warto rozważyć Backbone i poświęcić trochę czasu na jego opanowanie.

Rozwiązanie to otwiera znakomite podejście do tworzenia aplikacji, przejrzystą strukturę i działanie, a także możliwości integracji.

W następnej części zajmiemy się Routerem, widokami i innymi elementami.

Programista WWW i aplikacji mobilnych z wieloletnim doświadczeniem. Bloger 🙂 Anty-lewak 🙂 Pasjonat programowania, nowych technologii, a także sportu i motoryzacji.

Twitter LinkedIn Google+ Skype Xing 

Podaj dalej: Share on Facebook1Tweet about this on TwitterShare on Google+0Share on LinkedIn2Share on Tumblr0Digg thisEmail this to someonePin on Pinterest1
Możesz skomentować leave a response, lub podać trackback z własnej strony.