gramlot.

Course · Lesson 04 of 20

Connect fields and values

Predict reactive and sampled reads, then use datapath to make bindings local.

Reading · Practice2 sectionsPrerequisites: Initialize structured Data
Course contents
Orientation
  1. 01 Install Gramlot and create Hello world
  2. 02 Connect text and colour to Data
  3. 03 Explore Data and Source with the inspector
  4. 04 Use relative and symbolic paths, then dataFormula
  5. 05 Call the server with dataRpc and .remote
Start a project
  1. 01 Create your first project
  2. 02 Read and compose Source
  3. 03 Initialize structured Data
  4. 04 Connect fields and values
Build a form
  1. 05 Accept values, preserve drafts
  2. 06 Declare a calculation
  3. 07 Run an action at the right time
  4. 08 Name behavior and understand lifecycle
Compose an interface
  1. 09 Arrange an application with containers
  2. 10 Style the page you own
  3. 11 Publish messages and ask before acting
  4. 12 Format values without changing Data
Connect services
  1. 13 Call an endpoint
  2. 14 Load a Source fragment
  3. 15 Load Data when it is read
  4. 16 Save, restore and send Data deliberately
Deliver your work
  1. 17 Organize pages and choose a host
  2. 18 Read the JavaScript edition
  3. 19 Deliver the JavaScript edition offline
  4. 20 Explain and change a complete form

A pointer states a relationship

A ^ pointer reads a value and reacts to changes. An = pointer reads when its declaration executes without becoming a trigger. This distinction matters for a display and becomes especially useful for calculations and click actions.

In the excerpt, the heading and field share customer.name. Editing the field writes Data; the heading follows that same value.

Python · excerpt with an explicit root Data path
panel = root.div(datapath="customer")
panel.h2("^.name")
panel.input(value="^.name", live=True)

Change context without changing every binding

A branch’s datapath supplies the origin of its relative paths. The Variable datapath gallery example goes further: a selected record changes the branch’s context, and its children follow that record.

Write paths literally in teaching code. Before adding a second field, be able to resolve its full path from the branch context. A visually similar field attached to another path will not share the same value.

Your turn

Try it yourself

  1. Open Pointers and compare a reactive display with a sampled display.
  2. Change the shared input and note which display changes.
  3. Open Variable datapath, select a different record and follow the relative fields.

Check your understanding

Why does an = parameter not refresh a calculation when that value changes alone?

Show the answer and expected result

It is read when something else triggers execution. Use ^ for a dependency that should itself trigger an update. Choose deliberately: a button action often needs a snapshot, while a live total needs reactive inputs.

Working examples and reference