[PL] Aurora Frontend Get Noticed 2016 Issues TypeScript

Jak pogodzić Aurelię i Materialize CSS ?

Dzisiejszy post jest ostatnim technicznym z serii konkursowej, a chciałem w nim napisać o moim problemie z Materialize CSS. Zadanie proste: w widoku backlogu chciałem, aby podczas tworzenia nowego backlog itemu użytkownik miał opcję przypisania go do konkretnego sprintu. Do tego celu najlepiej sprawdza się dropdwown list. Nie myśląc za wiele udałem się na stronę mojego ulubionego frameworka w celu odnalezienia składni potrzebnej do wykonania zadania. Okazało się, że jednym z niezbędnych elementów jest zainicjowanie elementu DOM poprzez JavaScript. Metodą kopiego-pejsta umieściłem przykładowy kod w konstruktorze ViewModel-u, a w pliku HTML dodałem odpowiedni element select. Listing wygląda następująco:

 


$('').ready(() => {
    $('select').material_select();
});

 




<div class="input-field col s12" id="materialize-select">
    <select>
        <option value="" disabled selected>Choose your option</option>
        <option value="1">Option 1</option>
        <option value="2">Option 2</option>
        <option value="3">Option 3</option>
    </select>
    <label>Materialize Select</label>
</div>



 

Efekt był następujący:
sample1

 

No cóż, nie do końca o to mi chodziło. Zacząłem się zastanawiać co może być przyczyną takiego zachowania i doszedłem do wniosku, że najprawdopodobniej drzewo DOM nie jest gotowe przy wywołaniu konstruktora. Aby się upewnić napisałem krótki test. W tym celu do elementu select dodałem id „materialize-select„, a w konstruktorze oraz metodzie activate umieściłem następujący kod:

 

console.log(`activate: ${document.getElementById('materialize-select')}`);

 

Po odświeżeniu strony konsola wyglądała następująco:

 

sample2

 

Przyczyna się potwierdziła, a ja zacząłem zachodzić w głowie jak to rozwiązać. Z pomocą przyszedł oczywiście internet gdzie dowiedziałem o istnieniu jeszcze jednej metody dostępnej w Aureli w ramach zarządzania cyklem życia widoku. Mowa o metodzie attached, która wywoływana jest w chwili gotowości DOM. Po umieszczeniu w metodzie linijki testującej rezultat wyglądał tak:

 

 

sample3

 

Po teście przyszedł czas na umieszczenie kodu odpowiedzialnego za inicjowanie elementu select. Po odświeżeniu widoku, całość prezentowała się następująco:

 

Animation

 

Jak widać czasem najprostsze rzeczy potrafią okazać się problematyczne. Na dziś to wszystko, a my widzimy się po raz dwudziesty w przyszłym tygodniu, gdzie podsumujemy sobie rezultat zmagań w ramach konkursu Daj się poznać. Przypominam Wam, że cały kod projektu możecie zobaczyć na githubie. Zachęcam również do śledzenia mnie na twitterze facebooku.

Do następnego !

 

PS. Jeżeli jeszcze nie odsłuchaliście pierwszego odcinka mojego podcastu DevReview, to koniecznie zróbcie to teraz! Link macie tu 🙂

Don’t miss new posts!

If you enjoy reading my blog, follow me on Twitter or leave a like on Facebook. It costs nothing and will let you be up to date with new posts 🙂