Nova · Layouts

Layout refs

A layout kept under a name is used wherever { ref } names it. It is drawn in the place that names it, so inside a loop it reads the element of that turn.

The action, as it is written

{
  action: {
    id: 'layout-refs',
    data: {
      members: [
        { id: 'm1', name: 'Ada', row: 'C' },
        { id: 'm2', name: 'Grace', row: 'F' },
      ],
    },
    layout: {
      component: 'Stack',
      children: [
        {
          for: '$.members',
          as: 'member',
          key: 'id',
          do: { ref: 'layout-refs.card' },
        },
      ],
    },
  },
  layouts: {
    layout-refs.card: {
      component: 'Stack',
      children: [
        { component: 'Text', children: '$member.name' },
        { component: 'Text', children: 'Row {{$member.row}}' },
      ],
    },
  },
}

Running herepress it

Ada

Row C

Grace

Row F

What is done to it

Nothing. It is only drawn.

What it then holds

{
  members: [
    { id: 'm1', name: 'Ada', row: 'C' },
    { id: 'm2', name: 'Grace', row: 'F' },
  ],
}

What it then says

Ada
Row C
Grace
Row F

Output matches the expected value

Left: the action as the package ships it. Right: the same action running in this page, rendered with this site’s components. Below: the action run as the example specifies, on the installed package.