Dziś na tapetę weźmiemy przykład prostej klasy widoku backbone.js
Dla uproszczenia wszystkie kody zapiszemy w jednym pliku, naturalnie przy poważnych projektach będziemy chcieli mieć każdą klasę w osobnym pliku - co znacznie ułatwi "ogarnięcie" całości.
Stwórzmy więc gdzieś na serwerze index.html:
<!DOCTYPE html>
<html>
<head>
<title>Lista zadań</title>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.3.1/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
</head>
<body>
<button id="addTask">Dodaj zadanie</button>
<ul id="taskList">
</ul>
<script type="text/javascript">
//klasa widoku listy zadań będzie tutaj
</script>
</body>
</html>
Zacznijmy od napisania szkieletu widoku:
Jeśli czytasz uważnie, zauważysz w drugiej linii powyższego listingu konstrukcję $(function() {}); - jest to odpowiednik oklepanego $(document).ready(function () {}); Efekt jest dokładnie ten sam, $() sprawi, że jQuery wewnętrznie wywoła za nas czerwony kod, użyliśmy jednak znacznie mniej znaków i tym samym przyczyniliśmy się do ochrony środowiska naturalnego :)
Nasza klasa widoku (nie mylić z nk.pl! :) ) składa się z funkcji initialize która zconsolloguje komunikat podczas instancjonowania obiektu (dla celów szkoleniowych oczywiście). Dalej zapinamy eventa na kliknięcie elementu o id #addTask (jQuerowe selectory działają w backbone). W efekcie po kliknięciu guzika powinna się wyświetlić nasza metoda showPrompt, która na razie jeszcze nic nie robi poza pokazaniem okna inputu, ale przecież nie od razu Rzym zbudowano :)
Naturalnie musimy stworzyć instancję klasy (linia 17), przekazujemy jako parametr el, 'body' - dzięki temu metoda events widoku będzie słuchała na całym body.
W backbone istnieje kilka specjalnych opcji które możemy przekazać do klasy widoku - są one dostępne bezpośrednio jako zmienne (np. w tym wypadku możemy wewnątrz dowolnej metody widoku odwołać się do elementu poprzez this.el lub skrótem do jQerowego obiektu this.$el.
Pozostałe specjalne opcje dostępne bezpośrednio w widoku to: model, collection, id, className, tagName i attributes - o większości z nich wspomnę napewno w kolejnych częściach tutka.
Backbone nie ogranicza nas (na szczęście) jedynie do wymienionych opcji, instancjonując widok możemy przekazać dowolne zmienne, tablice, obiekty itd. Będą one wówczas dosŧepne w widoku przez this.options.nazwanaszejopcji.
W kolejnym odcinku rozbudujemy klasę widoku i połączymy ją z modelem.
//klasa widoku listy zadań
$(function() {
TaskEditView = Backbone.View.extend ({
initialize: function() {
console.log('Initializing task list view');
},
events: {
"click #addTask" : "showPrompt"
},
showPrompt: function() {
var taskName = prompt("Co chcesz dziś zrobić?");
}
});
taskedit = new TaskEditView({
el: 'body'
});
});
Jeśli czytasz uważnie, zauważysz w drugiej linii powyższego listingu konstrukcję $(function() {}); - jest to odpowiednik oklepanego $(document).ready(function () {}); Efekt jest dokładnie ten sam, $() sprawi, że jQuery wewnętrznie wywoła za nas czerwony kod, użyliśmy jednak znacznie mniej znaków i tym samym przyczyniliśmy się do ochrony środowiska naturalnego :)
Nasza klasa widoku (nie mylić z nk.pl! :) ) składa się z funkcji initialize która zconsolloguje komunikat podczas instancjonowania obiektu (dla celów szkoleniowych oczywiście). Dalej zapinamy eventa na kliknięcie elementu o id #addTask (jQuerowe selectory działają w backbone). W efekcie po kliknięciu guzika powinna się wyświetlić nasza metoda showPrompt, która na razie jeszcze nic nie robi poza pokazaniem okna inputu, ale przecież nie od razu Rzym zbudowano :)
Naturalnie musimy stworzyć instancję klasy (linia 17), przekazujemy jako parametr el, 'body' - dzięki temu metoda events widoku będzie słuchała na całym body.
W backbone istnieje kilka specjalnych opcji które możemy przekazać do klasy widoku - są one dostępne bezpośrednio jako zmienne (np. w tym wypadku możemy wewnątrz dowolnej metody widoku odwołać się do elementu poprzez this.el lub skrótem do jQerowego obiektu this.$el.
Pozostałe specjalne opcje dostępne bezpośrednio w widoku to: model, collection, id, className, tagName i attributes - o większości z nich wspomnę napewno w kolejnych częściach tutka.
Backbone nie ogranicza nas (na szczęście) jedynie do wymienionych opcji, instancjonując widok możemy przekazać dowolne zmienne, tablice, obiekty itd. Będą one wówczas dosŧepne w widoku przez this.options.nazwanaszejopcji.
W kolejnym odcinku rozbudujemy klasę widoku i połączymy ją z modelem.
Brak komentarzy:
Prześlij komentarz