mirror of
https://github.com/esiur/iui.git
synced 2025-05-06 06:42:58 +00:00
60 lines
1.1 KiB
Markdown
60 lines
1.1 KiB
Markdown
# Declarative Rendering
|
|
|
|
# Text nodes
|
|
Text nodes are enclosed with `${...}`
|
|
<i-codepreview>
|
|
${ navigator.userAgent }
|
|
</i-codepreview>
|
|
|
|
# Fields
|
|
starts with `:`
|
|
<i-codepreview>
|
|
<input :value="navigator.userAgent">
|
|
</i-codepreview>
|
|
|
|
# Attributes
|
|
starts with `::`
|
|
<i-codepreview>
|
|
<input ::placeholder="navigator.appName">
|
|
</i-codepreview>
|
|
|
|
# Asynchronous
|
|
|
|
*Promise*
|
|
Promises are automatically resolved.
|
|
|
|
<i-codepreview>
|
|
${fetch("md/hello.md")}
|
|
</i-codepreview>
|
|
|
|
*Await*
|
|
To use await in text nodes **async** attribute must be added to the parent element
|
|
|
|
|
|
<i-codepreview>
|
|
<div async>
|
|
${await (await fetch("md/hello.md")).text()}
|
|
</div>
|
|
</i-codepreview>
|
|
|
|
In attributes, the attribute name must be preceded with **async:**
|
|
|
|
<i-codepreview>
|
|
<input async:value = "await (await fetch('md/hello.md')).text()">
|
|
</i-codepreview>
|
|
|
|
Attributes are similar they must start with *async::*
|
|
|
|
|
|
<i-codepreview>
|
|
<input async::placeholder = "await (await fetch('md/hello.md')).text()">
|
|
</i-codepreview>
|
|
|
|
# Skip rendering
|
|
Any element with *skip* attribute will not enter the IUI rendering process
|
|
|
|
<i-codepreview>
|
|
<div skip>
|
|
${5 + 6}
|
|
</div>
|
|
</i-codepreview> |