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

javascript-html5-tutorial.pl

29 listopada, 2014

Dominik-W

Dziś część druga, w której zgłębiamy tajniki Backbone.js.

Tutorial Backbone.js

Po omówieniu podstaw i kluczowych aspektów, takich jak modele i kolekcje, zajmiemy się kolejnymi – Router, Views oraz Events.

Routing – Backbone.Router

Czym była by aplikacja bez możliwości interakcji.

Backbone.Router dostarcza metod routingu stron na client-side, połączenia z akcjami i zdarzeniami. Jest także rozwiązanie (graceful fallback) dla przeglądarek bez obsługi History API.

Przykład:

MyRouter = Backbone.Router.extend({
  routes: {'hello' : 'sayHello'},
  sayHello: function() {
    console.log('Saying hello');
  }
});

var router = new MyRouter();
Backbone.history.start();

A zatem definiujemy route oraz powiązaną funkcję do wykonania, następnie inicjujemy Backbone.history:

Backbone.history.start();

I to wszystko – możemy przetestować nasz kod.

W tym celu w pasku URL dodajemy nazwę naszej „trasy”, np. #hello:

http://url/index.html#hello

Można użyć kodu przykładu z poprzedniej części:

http://javascript-html5-tutorial.pl/tutorial-backbone-js-w-pigulce-czesc-12.html

Idąc dalej, możemy rozbudowywać definicje tworząc swego rodzaju „menu”. Możemy definiować także parametry routingu, co ilustruje kolejny przykład:

var Workspace = Backbone.Router.extend({
  routes: {
    "help":                 "help",    // #help
    "search/:query":        "search",  // #search/cars
    "search/:query/p:page": "search"   // #search/cars/p7
  },

  help: function() {
    ...
  },

  search: function(query, page) {
    ...
  }

});

Widoki – Backbone.View

Widoki to bardziej konwencja stosowana w Backbone. Generalną ideą jest logiczna organizacja interfejsu – widoków, generowanych na podstawie modeli, które mogą od razu reagować na zmiany modeli, bez przeładowywania strony.

SearchView = Backbone.View.extend({
  initialize: function() {
    alert("Hey!");
  }
});

var search_view = new SearchView();

Jest to znakomite miejsce do użycia szablonów (JavaScript templating).

Właściwość „el” odwołuje się do obiektu DOM utworzonego w przeglądarce i oznacza element powiązany z danym widokiem. Każdy widok Backbone.js ma właściwość „el” (jeśli nie jest zdefiniowana, Backbone.js utworzy mu własną – pusty element div).

Zobaczmy to w przykładzie:

<div id="search_container"></div>

SearchView = Backbone.View.extend({
  initialize: function() {
    alert("Hey");
  }
});

var search_view = new SearchView({ el: $("#search_container") });

Wczytywanie szablonu

Jak wiemy, Backbone.js jest zależne od Underscore.js, które oferuje własne rozwiązanie dla szablonów (micro-templating).

Napiszmy funkcję render(), która wywoła i wczyta szablon do elementu definiowanego przez „el” naszego widoku (użyjemy jQuery).

Rozważmy to w pełnym przykładzie.

HTML – szablon i element kontenera:

<script type="text/template" id="search_template">
  <label>Search</label>
  <input type="text" id="search_input" />
  <input type="button" id="search_button" value="Search" />
</script>

<div id="search_container"></div>

<script type="text/javascript">
SearchView = Backbone.View.extend({
  initialize: function() {
    this.render();
  },

  render: function() {
    // compile the template using underscore
    var template = _.template($("#search_template").html(), {});

    // load the compiled HTML into the Backbone "el"
    this.$el.html(template);
  }
});

var search_view = new SearchView({ el: $("#search_container") });
</script>

Załączam dodatkowe przykłady (z książki o Beginning Backbone.js) użycia szablonów:

http://directcode.eu/samples/backbonejs-tutorial-002-templates.zip

Pora na słowo dot. obsługi zdarzeń.

Backbone.js – Events

Zdarzenia mogą zostać dodane do dowolnego obiektu. Moduł zdarzeń Backbone umożliwia wiązanie (bind) i wyzwalanie (trigger) zdarzeń wbudowanych (built-in), jak i własnych (custom).

Wszystkie obiekty Backbone.js (View, Router, Collection, Model) mają wbudowany także moduł events, a ponadto my możemy rozszerzać każdy obiekt podstawowy o możliwości Backbone events:

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

Binding Events

Powiązanie oznacza, że obiekt jest skonfigurowany do nasłuchiwania wystąpienia poszczególnych zdarzeń.

Wykonujemy to za pomocą funkcji .on(). Przyjmuje ona trzy parametry: nazwę zdarzenia, funkcję to wywołania w przypadku zdarzenia, oraz opcjonalnie kontekst.

Przykład – nasłuchiwanie zmian atrybutu author:

model.on("change:author", function() {
  console.log('The author attribute has been changed');
});

Unbinding Events

Odłączenie obsługi zdarzenia wykonujemy w prosty sposób, dzięki funkcji .off():

ourObject.off('change:author');

Nasłuchiwanie jeden raz? W Backbone oczywiście!

model.once("change:author", function() {
...
});

Wszystko dzieje się automatycznie i nie ma potrzeby odłączania (unbinding) zdarzenia.

Zasoby

– strona projektu:

http://backbonejs.org/

– zbiór tutorial Backbone.js:

http://backbonetutorials.com/

Polecam także książkę: Beginning Backbone.js wyd. Apress.

Słowo o Marionette

Backbone.Marionette to rozwiązanie, które ma na celu ułatwienie budowy aplikacji dużej skali.

Strona projektu:

http://marionettejs.com/

A może Chaplin?

To kolejne rozwiązanie do użycia z biblioteką Backbone, wspomagające tworzenie skalowalnych aplikacji single-page, dostarczając odpowiedniej architektury i dobrych praktyk.

Strona projektu:

http://chaplinjs.org/

Podsumowanie

Na tym kończymy nasz dwuczęściowy tutorial Backbone.js w pigułce. Jako że coraz więcej pracujemy z tą biblioteką, za pewne będą pojawiać się kolejne wpisy na ten temat.

Dziękuję.