sercrod

Event directives

Sercrod uses @event attributes to attach DOM event handlers, and helper directives such as *prevent-default to adjust event behavior.

This page covers:

All handler expressions are evaluated as JavaScript inside the Sercrod scope of the host element. For data access and expression rules, see Data and interpolation.

Basic syntax: @event

Event handler directives are written as @name="expression". The name part is usually a DOM event name such as click or submit. 

<serc-rod data='{"count": 0}'>
  <button @click="count++">
    Clicked %count% times
  </button>
</serc-rod>

When the event fires, Sercrod evaluates the expression in the current scope. Any changes you make to data are reflected on the next render pass.

@click

@click attaches a click handler to a button, link, or any clickable element.

Toggle example

<serc-rod data='{"open": false}'>
  <button @click="open = !open">
    Toggle
  </button>

  <p *if="open">Now open.</p>
  <p *else>Now closed.</p>
</serc-rod>

Working with lists

<serc-rod data='{"items": ["A", "B", "C"]}'>
  <ul>
    <li *for="i, item of items">
      %item%
      <button @click="items.splice(i, 1)">Remove</button>
    </li>
  </ul>
</serc-rod>

@input and @change

@input and @change are used with form controls such as text inputs, checkboxes, radios, and selects.

In many cases you will combine them with *input so that Sercrod keeps the element value in sync with the data.

Text input with *input

<serc-rod data='{"name": ""}'>
  <input type="text"
         *input="name"
         @input="name = name.trimStart()">

  <p>Hello, %name%</p>
</serc-rod>

Checkbox and @change

<serc-rod data='{"done": false}'>
  <label>
    <input type="checkbox"
           *input="done"
           @change="done = !done ? false : true">
    Done
  </label>

  <p *if="done">Task is done.</p>
  <p *else>Task is not done yet.</p>
</serc-rod>

@submit

@submit attaches a handler to the form submit event. You typically use it to validate input and send data through *post or your own logic.

To keep the browser from navigating away or reloading the page, combine @submit with *prevent-default.

Submit with *prevent-default

<serc-rod data='{"email": "", "submitted": false}'>
  <form *prevent-default
        @submit="
          if(email){
            submitted = true;
          }
        ">
    <label>
      Email:
      <input type="email" *input="email">
    </label>
    <button type="submit">Send</button>
  </form>

  <p *if="submitted">Thank you.</p>
</serc-rod>

In this example the form does not perform a normal HTTP submit. Instead, the handler updates submitted, and Sercrod updates the view.

@focus and @blur

@focus and @blur are useful for styling or validation that depends on whether a control is active.

Track focus state

<serc-rod data='{"focused": false}'>
  <input type="text"
         @focus="focused = true"
         @blur="focused = false">

  <p *if="focused">Input is focused.</p>
  <p *else>Input is not focused.</p>
</serc-rod>

@keydown and @keyup

@keydown and @keyup run a handler when a key is pressed or released while the element has focus.

Simple keyboard counter

<serc-rod data='{"press_count": 0}'>
  <input type="text"
         placeholder="Type something"
         @keydown="press_count++">

  <p>Keys pressed: %press_count%</p>
</serc-rod>

For more advanced keyboard handling, you can combine these events with your own JavaScript functions or helper logic.

*prevent-default

*prevent-default tells Sercrod to call event.preventDefault() for the associated DOM event before running handlers.

Link that does not navigate

<serc-rod data='{"clicked": false}'>
  <a href="https://example.com"
     *prevent-default
     @click="clicked = true">
    Click without leaving this page
  </a>

  <p *if="clicked">Link was clicked.</p>
</serc-rod>

In this example the browser does not follow the link. The click is handled in Sercrod and only updates the local state.

Tips

See also