.

.

piątek, 5 maja 2017

Menu w nowej odsłonie

Przebudowa zakończona. Było to całkiem spore zadanie, wymagające rozbicia na mniejsze kawałki - i to właśnie okazało się w nim najbardziej wartościowe. Prosta zasada małych kroków po raz kolejny objawiła swą wielkość. ;) Krok po kroku, krok po kroczku, przytuptałam więc do momentu, w którym listy forms i genres (rodzajów i gatunków literackich) wyświetlają się w submenu, a co więcej - wyświetlają się nie wpisane "na sztywno" w widoku, tylko dynamicznie, pobierane AJAXem z API.

Przy okazji zmieniłam nieco układ samego dropdown-menu (My library) - link do wszystkich książek (All books) przeniosłam na górę, jako pierwszą opcję w dropdownie, na samym dole umieściłam zaś odnośnik do stworzonych niedawno filtrów typu multi-select (Advanced filters). Tak to wygląda po zmianach:



Jam to, nie chwaląc się, sprawiła. I to bez jedzenia siemienia konopnego. ;)

I gdyby nie jedno małe potknięcie, mogłabym odtrąbić wielki sukces, a tak - jest tylko sukces. ;) Poniżej krótkie streszczenie moich ostatnich poczynań:

  • Zaczęłam od dodania filtrów multi-select (Advanced filter) jako opcji w dropdownie i usunięcia zakładki "Filter books", pod którą owe filtry do tej pory były wyświetlane.
  • W kolejnym kroku stworzyłam widok submenu, posiłkując się tym Bootstrapowym pluginem, i umieszczając listy forms i genres "na sztywno" w index.html.
  • W kolejnym kroku zdynamizowałam wyświetlanie forms i genres w submenu, używając wbudowanego w Handlebars.js {{#each}} helpera.

Był to krok pośredni, taka połowiczna dynamizacja: na tym etapie listy forms i genres nie były już wprawdzie wpisane w widoku, ale za to w app.js, wywołując szablon Handlebars, przekazywałam do niego dane po prostu jako obiekt (zwykły literał), a nie jako odpowiedź z API (promisę).

  • Następnym, nieuniknionym krokiem było więc dopisanie AJAXa i "wstrzykiwanie" do widoku danych pobranych z API.

Tutaj pojawiła się jeszcze konieczność obsłużenia wyświetlania pierwszej litery poszczególnych nazw forms i genres jako wielkiej - do czego przydał się inny Handlebarsowy helper, znaleziony w tym tutorialu.

  • Wisienką na torcie było dodanie małego spinnera, który kręci się do momentu załadowania żądanej listy forms lub genres jako submenu.

I byłaby to taka radosna, sielska opowieść, gdyby nie to, że moje rozwiązanie miało jeden mały szkopuł (który szczęśliwie został mi pokazany). Otóż: w funkcji odpowiadającej za wyświetlenie submenu użyłam jQuerowej metody .append(), wkutek czego przy każdym kolejnym kliknięciu w "Forms" lub "Genres" do warstwy widoku był ładowany na nowo - uzupełniony danymi - szablon Handlebars. Widać to na poniższych screenach:

Przed pierwszym kliknięciem "Forms" - puste submenu.


Po jednym kliknięciu "Forms" - submenu doładowało się.


Po jednym kliknięciu "Forms" - szczegółowy widok submenu.


Po dwóch kliknięciach "Forms" - submenu doładowało się dwukrotnie
(2 tagi ul z klasą dropdown-menu).


Po pięciu kliknięciach "Forms" - submenu doładowało się pięciokrotnie
(5 tagów ul z klasą dropdown-menu).

Ostatecznie rzecz została rozwiązana następująco: przy starcie aplikacji uruchamiam funkcje odpowiedzialne za wywołanie odpowiednich szablonów Handlebars i "wstrzyknięcie" do HTMLa list forms i genres. Dzięki temu przy każdym (nawet pierwszym) kliknięciu w "Forms" lub "Genres" dane są już w widoku i nie muszą być dociągane.


Brak komentarzy:

Prześlij komentarz