Conditions and loops

This page describes Sercrod directives for conditional rendering and loops: *if, *elseif, *else, *switch, *case, *default, *for, *each, and *break.

All directive expressions are evaluated as JavaScript inside the Sercrod scope of the host element. For general rules on expressions and data, see Data and interpolation.

*if, *elseif, *else

*if, *elseif, and *else control whether an element is rendered based on a condition.

• *if="expression": renders the element when the expression is truthy.
• *elseif="expression": checked only when all previous *if/*elseif were falsy.
• *else: fallback when all previous conditions were falsy.

*elseif and *else must be written as direct siblings after the corresponding *if or *elseif inside the same parent. You cannot insert unrelated elements between them.

Basic example

<serc-rod data='{"status": "ready"}'>
  <p *if="status === "ready"">Ready.</p>
  <p *elseif="status === "busy"">Busy.</p>
  <p *else>Unknown.</p>
</serc-rod>

Inline conditions

The condition is a normal JavaScript expression, so you can use function calls and property access as needed.

<serc-rod data='{"user": {"name": "Taro", "active": true}}'>
  <p *if="user && user.active">
    Active user: %user.name%
  </p>
  <p *else>
    No active user.
  </p>
</serc-rod>

*switch, *case, *default

*switch, *case, and *default provide a switch-like branching model when there are many discrete values.

• *switch="expression": evaluates the expression once.
• *case="valueExpression": rendered when valueExpression is strictly equal to the *switch value.
• *default: fallback branch when no *case matched.

*case and *default are written as siblings associated with the nearest *switch.

Basic example

<serc-rod data='{"level": "warn"}'>
  <div *switch="level">
    <p *case=""info"">Information.</p>
    <p *case=""warn"">Warning.</p>
    <p *case=""error"">Error.</p>
    <p *default>Unknown level.</p>
  </div>
</serc-rod>

*for

*for loops over arrays or objects and repeats an element for each item. The syntax is close to JavaScript for-of and for-in.

Syntax

• *for="item of items"
• *for="i, item of items"
• *for="key in object"
• *for="key, value in object"

Here items or object is an expression in the Sercrod scope. item or value is the current element, and i or key is the index or key.

Array example

<serc-rod data='{"items": ["A", "B", "C"]}'>
  <ul>
    <li *for="item of items">%item%</li>
  </ul>
</serc-rod>

Array with index

<serc-rod data='{"items": ["A", "B", "C"]}'>
  <ul>
    <li *for="i, item of items">
      #%i%: %item%
    </li>
  </ul>
</serc-rod>

Object example

<serc-rod data='{"map": {"a": 1, "b": 2}}'>
  <ul>
    <li *for="key, value in map">
      %key% = %value%
    </li>
  </ul>
</serc-rod>

*each and *break

*each is also a loop directive. It repeats an element over an iterable and injects loop variables into the scope of that element. In many simple cases it can be used with the same shape as *for.

A typical pattern looks like this:

Basic example

<serc-rod data='{"items": [{"name": "A"}, {"name": "B"}]}'>
  <ul>
    <li *each="item of items">%item.name%</li>
  </ul>
</serc-rod>

*each and *include / *import

*each and *include (or *import) cannot be written on the same element.

• If both appear on one element, *each wins and the include is ignored.
• Sercrod detects this situation and emits a warning in the console.

*break

*break stops the remaining iterations of the current loop.

• *break without a value: stops the loop immediately when reached.
• *break="expression": stops the loop only when the expression is truthy.

Example: limit the number of items

<serc-rod data='{"items": [1, 2, 3, 4, 5]}'>
  <ul>
    <li *each="i, item of items">
      <span *break="i >= 3"></span>
      Item %item%
    </li>
  </ul>
</serc-rod>

In this example, the loop stops when the index becomes 3 or more, so only the first three items are rendered.

Tips

• Keep conditions as simple as possible. For more complex logic, use *let to prepare intermediate variables before the conditional.
• When lists are frequently reordered or filtered, think about the data structure and update pattern so that re-rendering stays predictable.
• In nested loops, choose clear variable names (for example outer and inner) to avoid confusion.

See also

• Data and interpolation
• Events
• Directives overview