Code and looping inside html blocks
Note: This is experimental syntax, feel free to use it, but please report any bugs if found.
ACSS code blocks can be placed inside HTML blocks within components. This can be useful for looping variables and rendering the results.
If used without a target selector, the render command will place any rendered content inside the HTML block at the place in the code where the ACSS is located. All render commands in one event flow block are concatenated and rendered together as the final result at the end of the event flow. There is not an immediate render like there is with the regular render command.
Any event scoping or variable scoping used in the html block will follow the rules of component scoping for events and variables.
To place conditional statements or target selectors inside html blocks, you use the "{:" to open the code block, and ":}" to close it.
For example:
body:init {
render-before-end: "<hello-world></hello-world>";
}
@component hello-world {
html {
<div>
{:
render: "Hello world.";
:}
</div>
}
}You can put multiple ACSS code blocks into the same html block.
What you cannot do is use any delayed events, the pause command, loading events, anything with await, or anything that looks asynchronous. The flow of commands must not currently contain anything that requires the event flow to break out during the rendering of the component.
It does, however, work with reactive variables.
A reusable clock within an html block
When the $time variable changes, the reactive render of the variable will update ($time inside double-curlies).
The $time variable is set to change every second (every 1s).
Because the component is set to strictlyPrivate, all variables used inside the component are applicable only to that component, which means that this code can be copied and pasted into any other ACSS code and will work as a self-contained component.
Looping inside an html block
This is useful when iterating an array for rendering inside a component, as shown in this example.
Render commands used within html blocks are concatenated into one string and drawn at the completion of the event flow.