Tilbage til Testimonials-komponenten

Kontekstdrevet UI

Invoker commands og deklarativ interaktion

Beskriv relationen mellem en knap og dens target i HTML, og behold kun den egentlige logik i JavaScript.

Se undervisningsslides

Relevante links

TL;DR

  1. commandfor peger på et target, mens command beskriver den handling, knappen anmoder om.
  2. Indbyggede kommandoer kan være helt deklarative; custom commands håndteres af target-elementet i JavaScript.
  3. Semantik og state forsvinder ikke: brug knapper, meningsfulde navne og korrekte disabled/ARIA-states.

Indbyggede kommandoer

Nogle browserhandlinger kan beskrives direkte i HTML:

<button commandfor="details" command="toggle-popover">
  Vis detaljer
</button>


<div id="details" popover>…</div>

HTML’en viser både, hvilket element der udløser handlingen, og hvilket target der modtager den. Det reducerer click-handler-kode uden at ændre komponentens semantik.

Custom commands

Applikationsspecifikke kommandoer skal begynde med --:

<button commandfor="scroller" command="--scroll" value="-0.9">
  Forrige
</button>


<button commandfor="scroller" command="--scroll" value="0.9">
  Næste
</button>

Target-elementet håndterer kommandoen:

const scroller = document.querySelector("#scroller");


scroller.addEventListener("command", (event) => {
  if (event.command !== "--scroll") return;


  scroller.scrollBy({
    left: scroller.clientWidth * Number(event.source.value),
    behavior: "smooth",
  });
});

event.target er target-elementet, og event.source er knappen, som sendte kommandoen. Eventet håndteres på target, fordi et command-event ikke bobler som et almindeligt click-event.

Komponent-state og disabled

Invoker commands overtager ikke komponentens øvrige state. En carousel skal stadig deaktivere “forrige” ved starten og “næste” ved slutningen:

function updateControls() {
  const max = scroller.scrollWidth - scroller.clientWidth;


  previous.disabled = scroller.scrollLeft <= 0;
  next.disabled = scroller.scrollLeft >= max - 1;
}

Det native disabled-attribut er bedre end kun en visuel klasse: browseren opdaterer både interaktion og accessibility tree.

Se mere