Nie długa, nie krótka, lecz w sam raz, historia o tym, jak przestałam pożyczać e-booki i audiobooki.
Kilka dni temu olśniło mnie, że w BUCE jest ux'owy bug. Mianowicie: możliwe było zaznaczenie, że książka typu e-book i audiobook jest wypożyczona (tak samo jak książka papierowa). Co w rzeczywistości nie zachodzi z wiadomych powodów (udostępnione innym pliki elektroniczne jednocześnie wciąż pozostają u nas; nie ma więc mowy o faktycznym, fizycznym "pożyczeniu").
Zaczęłam więc kombinować, jak by tu uzależnić wyświetlanie checkboxa "Is borrowed?" od typu książki. Pierwszym pomysłem było użycie if block helper biblioteki Handlebars.js. Jak się okazało, obrałam całkiem słuszny kierunek, ale rozwiązanie znalazłam gdzie indziej, czy też - nieco dalej. Handlebarsowy warunek if przyjmuje bowiem tylko pojedynczą wartość, nie może przyjąć wyrażenia. A ja właśnie wyrażenia potrzebowałam (book.bookTypeId === 1).
Ostatecznie rozwiązanie znalazłam - a jakże - w sieci, dokładnie tutaj: https://code-maven.com/handlebars-conditionals, w postaci if_eq helpera, który przyjmuje dwa parametry i pozwala porównać je ze sobą. (Może warto w tym miejscu wspomnieć, że biblioteka Handlebars dostarcza gotowe, wbudowane helpery, które znajdziemy w dokumentacji, ale pozwala też tworzyć własne. Liczne użyteczne przykłady fruwają w internecie; blisko 150 takich helperów jest dostępnych choćby tutaj.)
Zatem - triumf! Udało się osiągnąć zamierzony efekt: na formularzu edycji książki wspomniany checkbox wyświetla się już wyłącznie przy książkach papierowych. (Tutaj link do GitHuba.) Szukam teraz jeszcze sposobu, aby podobną funkcjonalność zrobić na formularzu dodawania książki. To, wbrew pozorom podobieństwa, osobna para kaloszy.
[Kilka godzin później]
Gdy tak trwałam w radosnym zamyśleniu (bo przecież coś udało się zrobić, ale wciąż zrobić trzeba było jeszcze coś), przyszła odpowiedź od Doświadczonej Osoby, którą poprosiłam o weryfikację mojego rozwiązania (z if_eq helper). Wtedy właśnie padło tytułowe "Widok ma być głupi" i rzeczone rozwiązanie trzeba było przeformułować. Działało, ale to nie znaczy, że było dobre. Klasyka. ;) Nie było też tak zupełnie złe;
było niewystarczające (w kontekście potrzeby implementacji analogicznego ficzera na formularzu dodawania książki, a zwłaszcza - w kontekście dalszego rozwoju apki, a dokładnie - używania jednego formularza i do edycji, i do dodawania książki.)
Chcąc, nie chcąc, musnęłam tutaj zatem spory temat, jakim są wzorce projektowe, czyli pewne uniwersalne szablony, schematy dobrych rozwiązań dla często występujących w programowaniu problemów. Innymi słowy: takie zestawy dobrych praktyk, zbiory wskazówek i wytycznych, jak z gracją omijać krzaki, wykroty i błotniste kałuże.
Tak więc wychynął zza węgła i objawił się w swej krasie jeden z fundamentalnych wzorców, mianowicie MVC (z ang. Model-View-Controller), wedle którego logika aplikacji nie powinna być definiowana w warstwie widoku (jak to zrobiłam, używając if_eq helpera), tylko w kontrolerze. Rozwijając tę myśl: rola widoku ma być ograniczona do tego, by wyświetlił właściwe elementy, wyrenderował prawidłowy, określony wygląd; widok nie powinien nic "wiedzieć" o tym, od czego zależy wyświetlenie danego kawałka kodu, jaka logika za tym stoi, powinien jedynie poprawnie obsługiwać różne warianty (warunki), zdefiniowane poza nim samym, gdzie indziej, czyli w kontrolerze właśnie.
Uzbrojona w tę wiedzę, zmodyfikowałam wyżej opisane rozwiązanie: w index.html (czyli w widoku) użyłam zwykłego handlebarsowego if-a (a jednak!):
{{#if displayBorrowedCheckbox}}
...
{{/if}}a jego warunek (displayBorrowedCheckbox) z adekwatną wartością umieściłam w pliku app.js, gdzie (póki co) trzymam wszystkie akcje dostępne w aplikacji. Tym sposobem obsłużyłam formularz edycji (link do GitHuba) oraz otworzyłam sobie drogę do docelowej (czyli: w oparciu o jeden formularz w warstwie widoku, ze znikającym checkboxem "Is borrowed?" dla książki typu e-book / audiobook) obsługi formularza dodawania książki (link do GitHuba).
Potem, gnana przeczuciem, że to jest dzień, w którym wszystko mi się uda1 ;), zrobiłam ten ostatni krok: użyłam tego samego formularza z warstwy widoku zarówno do edycji, jak i do dodawania książki. Uznałam, że optymalny ux będzie taki: po otwarciu formularza dodawania książki checkbox "Is borrowed?" jest niewidoczny, pojawia się dopiero wtedy, gdy w dropdownie zostanie wybrana książka papierowa. Żeby to obsłużyć jednym formularzem, musiałam ostatecznie zamienić if helper na unless helper. Finalne rozwiązanie można zobaczyć tutaj. Działa i jest wystarczające. :)
1 Pięknie było tylko do czasu. Rozczarowanie przyszło wieczorem, gdy okazało się, że jednak nie trafiłam szóstki w kumulacji Lotto. ;( ;)
Brak komentarzy:
Prześlij komentarz