Use accessors to simplify complex expressions

Extract a deeply nested value into a named local variable so you can reference it cleanly throughout a component.

When a deeply nested path like weatherData.value.current_condition[0] appears in multiple expressions, repeating it in full on every binding is noisy and error-prone. Adding var.condition="{ weatherData.value.current_condition[0] }" to any containing element declares a reactive local variable that evaluates once and can be referenced by the shorter name condition everywhere inside that element.

<App>
  <!-- Fetch weather data from API -->
  <DataSource id="weatherData" url="/api/weather" />

  <!-- Without accessors: deeply nested expressions -->
  <Card title="Weather (without accessors)" when="{weatherData.loaded}">
    <VStack gap="$space-3">
      <Text>
        Temperature: {weatherData.value.current_condition[0].temp_F}°F
        ({weatherData.value.current_condition[0].temp_C}°C)
      </Text>
      <Text>
        Conditions: {weatherData.value.current_condition[0].weatherDesc[0].value}
      </Text>
    </VStack>
  </Card>

  <!-- With accessors: extract once, use many times -->
  <Card
    title="Weather (with accessors)"
    when="{weatherData.loaded}"
    var.condition="{ weatherData.value.current_condition[0] }"
  >
    <VStack gap="$space-3">
      <Text>
        Temperature: {condition.temp_F}°F ({condition.temp_C}°C)
      </Text>
      <Text>
        Conditions: {condition.weatherDesc[0].value}
      </Text>
    </VStack>
  </Card>
</App>
<App>
  <!-- Fetch weather data from API -->
  <DataSource id="weatherData" url="/api/weather" />

  <!-- Without accessors: deeply nested expressions -->
  <Card title="Weather (without accessors)" when="{weatherData.loaded}">
    <VStack gap="$space-3">
      <Text>
        Temperature: {weatherData.value.current_condition[0].temp_F}°F
        ({weatherData.value.current_condition[0].temp_C}°C)
      </Text>
      <Text>
        Conditions: {weatherData.value.current_condition[0].weatherDesc[0].value}
      </Text>
    </VStack>
  </Card>

  <!-- With accessors: extract once, use many times -->
  <Card
    title="Weather (with accessors)"
    when="{weatherData.loaded}"
    var.condition="{ weatherData.value.current_condition[0] }"
  >
    <VStack gap="$space-3">
      <Text>
        Temperature: {condition.temp_F}°F ({condition.temp_C}°C)
      </Text>
      <Text>
        Conditions: {condition.weatherDesc[0].value}
      </Text>
    </VStack>
  </Card>
</App>

Key points

Declare var.name on any container element: The variable is available to all descendants of the element it's declared on — the accessor's scope matches the element's subtree.

Accessors are reactive: The expression is re-evaluated whenever any variable it references (such as weatherData.loaded) changes. The shorthand name condition always reflects the latest value.

It is just a variable — not special syntax: var.condition is the same as any other var.* variable. You can compute, transform, or combine values in the expression, not just extract a nested path.

Use accessors for repeated paths of three or more levels: A single-level path such as {item.name} is already readable. Accessors pay off when the same sub-path appears three or more times, or when the path is long enough to obscure intent.

See also