Przeszedłem kilka tutoriali frontendowego frameworka o wdzięcznej nazwie Aurelia i zacząłem pisać własną aplikację używając tego narzędzia. Jednym ze stworzonych widoków zawierał następujący kod:
<template> <div class="contact-list"> <ul class="list-group"> <li repeat.for="contact of contacts" class="list-group-item ${contact.id === $parent.selectedId ? 'active' : ''}"> <a route-href="route: contacts; params.bind: {id:contact.id}" click.delegate="$parent.select(contact)"> <h2>${contact.id}</h2> </li> </ul> </div> </template>
Uruchomiłem aplikację i w oknie przeglądarki ujrzałem spodziewany rezultat, ale w konsoli czekał mnie już niespodzianka w postaci trzech, kolejno po sobie występujących, takich samych błędów:
vendor-bundle.js:11582 ERROR [route-href] Error: A value is required for route parameter 'id' in route 'contacts'.(…)
Zaczynam więc kombinować z fetchem, którego używałem do pobierania danych z serwera. Przeczytałem dokumentację oraz mnóstwo postów i artykułów na temat Aurelii, nawet zakupiłem książkę Aurelia for Real World Applications autorstwa Dwayne’a Charingtona w nadziei, że tam znajdę rozwiązanie swojego problemu. Nauczyłem się wiele o CompositionTransactions, javascriptowym async/await, o transpileracha i polifilach, o Promise, a nawet zamieniłem kilka słów z samym Robem Eisenbergiem, który wykazał się wielkim zrozumieniem dla mojej niewiedzy. Jego urok nie pomógł mojej sprawie, bo tak samo jak ja stawiał – co się okazało po dwóch dniach – na zupełnie inne przyczyny problemu (dziurawa kolekcja „wpadająca” do widoku czy też zbyt późne pobranie danych z serwera).
Na na sam koniec zacząłem stosować sprawdzoną, ale jakże żmudną metodę wyrzucania po kolei kawałków kodu ze sprawdzaniem czy objawy ustąpiły czy trzeba usuwać dalej.
Wreszcie dojechałem do upragnionego celu, a problem stanowił, o zgrozo, niezamknięty tag <a>, który z routingiem ma tylko tyle wspólnego, że w jego atrybutach znajduje się konfiguracja hrefa. Ma to jednak niewiele wspólnego z brakującym parametrem, który był poprawnie skonfigurowany.
Finalnie kod powinien wyglądać tak:
<template> <div class="contact-list"> <ul class="list-group"> <li repeat.for="contact of contacts" class="list-group-item ${contact.id === $parent.selectedId ? 'active' : ''}"> <a route-href="route: contacts; params.bind: {id:contact.id}" click.delegate="$parent.select(contact)"> </a> </li> </ul> </div> </template>
i cała aplikacja działa cudownie i … zaczyna się pojawiać uczucie… oczywiście do Aurelci.