Lists, transitions, and the DOM

Render keyed lists

Use template, x-for, and stable keys so DOM identity follows the underlying record.

9 minute lesson

~~~

Before choosing a tool or writing more code, make the requirement concrete. Issue ids remain stable while titles and positions change, so edit state stays attached to the correct issue.

A stable key lets Alpine associate an existing DOM subtree with the same logical item after filtering or reordering. The useful target is not encyclopedic coverage. Make one deliberate choice, observe its consequences, and know which requirement would make you revise it.

A common failure is to use the array index as identity for records that can be inserted, deleted, or sorted. The happy path may still work, which makes the mistake easy to miss. bind a unique stable record id as the key and test insertions, removals, and reordering. Keep the first version small enough that every important input and output remains visible.

This supports the module goal: Render dynamic issue rows without losing identity, focus, or respect for reduced-motion preferences. Capture the request, command, trace, screenshot, test result, or other evidence that proves the result.

Edit one row, reorder the issues, and verify focus and local state remain on that issue. Change one condition on purpose, predict the result, and compare the prediction with what actually happened.

Lesson completed

Take this course offline

Get every free book and course as PDF and EPUB files.

Get the download library →