Aurelia i mylący komunikat błędu o wymaganym parametrze dla routingu.

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.