{"slug":"lists","title":"Lists","headings":["Try it"],"contentHtml":"

Lists

each renders reactive lists with keyed reconciliation:

import { each, tags } from \"ruri\"\n\nconst { ul, li } = tags\nconst todos = new Signal([{ id: 1, text: \"one\" }])\n\nul({}, each(todos, (todo, index) => li({}, `${index.value}: ${todo.text}`), {\n  key: (todo) => todo.id,\n}))

increasing subsequence)

Try it

Every second row toggles its label - watch the rows move without being rebuilt:

import { each, Signal, tags } from \"ruri\"\n\nconst { ol, li, button } = tags\nconst rows = [{ id: 1, text: \"alpha\" }, { id: 2, text: \"beta\" }, { id: 3, text: \"gamma\" }]\nconst items = new Signal(rows)\nlet flipped = false\n\noutput.append(\n    ol({}, each(items, (row) => li({}, row.text), { key: (row) => row.id })),\n    button({\n      onclick: () => {\n        flipped = !flipped\n        items.value = flipped ? [...items.peek()].reverse() : [...items.peek()]\n      },\n    }, \"reverse\"),\n)
running...
"}