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(Void) {
    case input {
      Maybe::Nothing => next { }
      Maybe::Just(element) =>
        {
          await Dom.focusWhenVisible(element)
          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(Void) {
    next { text: text }
  }

  fun render : Html {
    <div>
      <{ text }>
    </div>
  }
}

component Main {
  fun handleClick : Promise(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>
  }
}