Sercrod directives
This page is the entry point for the Sercrod directive reference.
Basic directives
*let- define local variables available to expressions inside this element.*print- print the result of an expression into the element as plain text.*input- bind a form control value to a data path.*if- conditionally render this element when the expression is truthy.*else- fallback branch for a*if/*elseifgroup when no condition matched.*for- repeat this element for each item in a list.*save- save host data or a staged view through a configured storage mechanism.*load- load data from storage into host data.*rem- remove this element from the rendered output. Use as a Sercrod-only comment.
See also:
- Data and
*let- detailed notes about data and*let.
Extended directives
*compose- compose this element from another template, partial, or host.*each- repeat this element for each entry in a map (value, key).*stage- work with a staged copy of host data for editing before applying.*apply- apply staged changes from the stage back to the host data.*restore- discard staged changes and restore host data from the last stable state.*upload- upload selected files or data to a server endpoint.*download- trigger a download of data from a server endpoint.
Debugging
*log- evaluate an expression and log its value, expression, and host snippet.
All directives
Control flow
*if- conditionally render this element when the expression is truthy.*elseif- else-if branch paired with a preceding*ifor*elseif.*else- fallback branch for a*if/*elseifgroup when no condition matched.*for- repeat this element for each item in a list.*each- repeat this element for each entry in a map (value, key).*switch- select one branch from*case/*defaultbased on an expression.*case- render this branch when the*switchexpression equals the case value.*case.break- like*case, and stop evaluating later*casebranches.*break- stop processing the current*for/*eachloop when the expression is truthy.*default- fallback branch for*switchwhen no*casematched.
Scope and literals
*let- define local variables available to expressions inside this element.*global- write variables into the global Sercrod data scope.*literal- treat the inner content as a literal string, without Sercrod expansion.*rem- remove this element from the rendered output. Use as a Sercrod-only comment.
Form input
*input- bind a form control value to a data path.*lazy- update bound data on a later event instead of every input.*eager- update bound data eagerly, typically on each input event.
Staging and persistence
*stage- work with a staged copy of host data for editing before applying.*apply- apply staged changes from the stage back to the host data.*restore- discard staged changes and restore host data from the last stable state.*save- save host data or a staged view through a configured storage mechanism.*load- load data from storage into host data.
HTTP and API
*post- send host data as JSON via POST and write the JSON response back into host data.*fetch- fetch JSON from a URL and merge or replace it into host data.*api- configure an API base URL or options for nested*fetch/*postdirectives.*into- direct the result of the previous directive into a specific data path.
Rendering output and composition
*print- print the result of an expression into the element as plain text.*compose- compose this element from another template, partial, or host.*textContent- set the DOMtextContentproperty from an expression.*innerHTML- set the DOMinnerHTMLproperty from an expression.*unwrap- see the dedicated page.
WebSocket
*websocket- open and manage a WebSocket connection for this host.*ws-send- send a message through the active WebSocket connection.*ws-to- set the logical target for outgoing WebSocket messages on this host.
Upload and download
*upload- upload selected files or data to a server endpoint.*download- trigger a download of data from a server endpoint.
Event helpers
*prevent-default- callevent.preventDefault()for the current event.*prevent- short form of*prevent-defaultfor the current event.
Lifecycle
*updated- call a handler after this host has been updated.*updated-propagate- like*updated, and propagate the update event to parents.
Debugging
*log- evaluate an expression and log its value, expression, and host snippet.
Methods
*methods- define methods that can be called from expressions in this host.
Templates
*template- mark this subtree as a reusable template.*include- include and render a template or partial into this place.*import- import a template or partial from another file or module.
Attribute bindings
:action- attribute binding foraction.:class- attribute binding forclass.:formaction- attribute binding forformaction.:href- attribute binding forhref.:src- attribute binding forsrc.:style- attribute binding forstyle.:value- attribute binding forvalue.:xlink:href- attribute binding forxlink:href.
Fallback:
Event bindings
@blur- event binding forblur.@change- event binding forchange.@click- event binding forclick.@focus- event binding forfocus.@input- event binding forinput.@keydown- event binding forkeydown.@keyup- event binding forkeyup.@submit- event binding forsubmit.
Fallback: