Todo list

A todo list with add, complete, delete, and filter.

Structure

Todos   the list, the text being typed, and the filter
Clock   a clock on its own timer
Page    the parent, holding references to Todos and Clock

The clock is included to confirm that its ticking does not redraw the list.

Page holds references to Todos and Clock. When the clock ticks and redraws itself, Page's state does not change. If Page is redrawn, its references to the children are unchanged, so the children are not redrawn. This is not an optimization the programmer specifies; it follows from reference identity.

Text being typed

The text being typed is held by Todos. Redrawing the list does not clear the input field.

List rows have a key:. When rows move because of sorting or deletion, the DOM nodes are moved, not rebuilt.

Markup

The rows are cloned from a sample element in the designer's HTML. The LPScript program contains no HTML.