Nova · Actions

Input model

model binds a component to a path both ways: it shows what stands there, and what is typed is written back. No trigger is needed.

The action, as it is written

{
  id: 'input-model',
  data: { name: '' },
  layout: {
    component: 'Stack',
    children: [
      {
        component: 'Input',
        ref: 'name',
        model: '$.name',
        props: { placeholder: 'Your name' },
      },
      { component: 'Text', children: 'Hello, {{$.name}}.' },
    ],
  },
}

Running herepress it

Hello, .

What is done to it

type 'Ada' into name

What it then holds

{ name: 'Ada' }

What it then says

Your name
Hello, Ada.

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.