
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:
– zbiór tutorial Backbone.js:
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:
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:
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ę.