Pages
Introduction
Getting Started
Recipes
Reference
Literals
Arrays
Tuples
Type System
Functions
Modules
Records
Enums
Built-in Types
Constants
Equality
Stores
Routing
Comments
Control Expressions
Components
Properties
Computed Properties
Styling Elements
Connecting Stores
Using Providers
Internal State
Referencing Entities
Global Components
Lifecycle Functions
Directives
JavaScript Interop
Environment Variables
Packages
Referencing Entities
Sometimes it's necessary to access elements or components in a component for
a number of reasons. To do that you can use the
as name
notation.
The usual example is to focus an element after an event happens:
component Main {
fun handleClick : Promise(Never, Void) {
case (input) {
Maybe::Just(element) =>
sequence {
Dom.focusWhenVisible(element)
next { }
} catch String => error {
sequence {
Debug.log(error)
next { }
}
}
Maybe::Nothing => next { }
}
}
fun render : Html {
<div>
<input as input/>
<button onClick={handleClick}>
"Focus the input!"
</button>
</div>
}
}
As you can see the
input
variable will be a
Maybe(Dom.Element)
and this is because there is no guarantee that the element will be in the DOM
at the time the function runs.
This works with components as well:
component Item {
state text : String = "Hello"
fun update(text : String) : Promise(Never, Void) {
next { text = text }
}
fun render : Html {
<div>
<{ text }>
</div>
}
}
component Main {
fun handleClick : Promise(Never, Void) {
case (item) {
Maybe::Just(todoItem) => todoItem.update("Bello")
Maybe::Nothing => next {}
}
}
fun render : Html {
<div>
<Item as item/>
<button onClick={handleClick}>
"Click me!"
</button>
</div>
}
}