Nova · Actions

Counter

An action with count in its data and two triggers. A press on a button is a ui:click on its ref; the trigger for that ref changes the data, and the text over it is drawn again.

The action, as it is written

{
  id: 'counter',
  data: { count: 0 },
  layout: {
    component: 'Stack',
    children: [
      { component: 'Text', children: 'Count: {{$.count}}' },
      {
        component: 'Button',
        ref: 'more',
        children: 'One more',
      },
      {
        component: 'Button',
        ref: 'fewer',
        children: 'One fewer',
      },
    ],
  },
  triggers: [
    {
      event: 'ui:click',
      ref: 'more',
      do: [{ increment: 'count' }],
    },
    {
      event: 'ui:click',
      ref: 'fewer',
      do: [{ decrement: 'count' }],
    },
  ],
}

Running herepress it

Count: 0

What is done to it

press more
press more
press fewer

What it then holds

{ count: 1 }

What it then says

Count: 1
One more
One fewer

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.