- Input
- Ada
- customer.name
- Ada
- Heading
- Ada
See the result before the syntax.
Imagine entering Ada in a name field. A heading elsewhere shows Ada too. Change the Data value and the field follows. The field and heading are two views of the same application value.
That is useful in a registration summary, a customer sidebar or any page where one answer appears more than once. The application describes the relationship instead of maintaining copies.
Read these three lines slowly.
The branch uses customer as its Data scope. The dot in .name means relative to that scope, so both declarations refer to customer.name. The caret means read this value and react to changes.
The native input uses live=True here so each input event updates Data. Without it, the default native-input write happens on change. Timing is part of the control contract; binding does not mean every edit is always committed immediately.
panel = root.div(datapath=".customer")
panel.h2("^.name")
panel.input(value="^.name", live=True)Read the explanation here. The working lesson and full contract are linked below.
Try to predict the change.
The same idea works when the name is supplied by another part of the application. You do not need a separate “refresh heading” operation. This is the foundation for the next step: values calculated from other values.
A second heading
What happens if another heading reads ^.name in this branch?
Reveal the explanation
It follows customer.name too. It does not introduce a second name or a new source of truth.
Try the working example and read the full contract
KEEP EXPLORING