WEBVTT

00:00:00.600 --> 00:00:04.705
In this lesson we will organize an order
around its data context.

00:00:04.885 --> 00:00:10.211
We will replace repeated absolute paths with
relative ones, then read the same value

00:00:10.211 --> 00:00:11.797
through symbolic origins.

00:00:11.977 --> 00:00:17.162
Finally, we will introduce a data Formula
that multiplies price by quantity, and

00:00:17.162 --> 00:00:18.717
watch its result update.

00:00:20.520 --> 00:00:25.499
We start with the small order Page from the
examples download, in the same teaching

00:00:25.499 --> 00:00:25.799
host.

00:00:25.979 --> 00:00:30.438
Price and quantity are stored at order dot
price and order dot quantity.

00:00:30.618 --> 00:00:33.893
For now, each input uses its full absolute
path.

00:00:34.073 --> 00:00:36.391
Start Uvicorn with automatic reload.

00:00:36.571 --> 00:00:38.825
Open the local address in the browser.

00:00:39.287 --> 00:00:44.350
The two inputs show twelve and three; the
row below the section reads the same price

00:00:44.350 --> 00:00:45.616
by its absolute path.

00:00:47.400 --> 00:00:52.522
Now give the section a data path, order, and
make its initializers and input paths

00:00:52.522 --> 00:00:53.084
relative.

00:00:53.264 --> 00:00:56.368
The leading dot means start from this data
context.

00:00:56.548 --> 00:01:01.818
Inside this section, dot price resolves to
order dot price, and dot quantity to

00:01:01.818 --> 00:01:03.085
order dot quantity.

00:01:03.265 --> 00:01:08.117
The caret still means a reactive pointer;
the dot determines where its path begins.

00:01:08.297 --> 00:01:12.724
Save the Page, wait for the server to
reload, then refresh the browser.

00:01:12.904 --> 00:01:16.850
The relative price row and the absolute row
both show twelve.

00:01:17.030 --> 00:01:18.675
Change Price to fifteen.

00:01:18.855 --> 00:01:23.047
Both rows now show fifteen, because they
read the same Data value.

00:01:24.840 --> 00:01:29.703
Give the section the node ID order Form,
then add a price display outside it.

00:01:29.883 --> 00:01:35.136
This identifier has a purpose: it
establishes the origin for the symbolic
path.

00:01:35.316 --> 00:01:39.495
The outside display uses caret, hash, order
Form, dot price.

00:01:39.675 --> 00:01:44.527
It finds that named Source node, then
resolves price from the node’s order data

00:01:44.527 --> 00:01:45.018
context.

00:01:45.198 --> 00:01:48.328
Save, wait for automatic reload, and
refresh.

00:01:50.197 --> 00:01:55.166
The new outside row shows the same price as
the relative and absolute rows.

00:01:55.346 --> 00:01:57.012
Change Price to eighteen.

00:01:57.192 --> 00:02:01.789
All three displays follow, even though the
named display is outside the section.

00:02:03.600 --> 00:02:08.674
Now mark this same section as a form context
and an anchor, and add two more price

00:02:08.674 --> 00:02:09.850
displays inside it.

00:02:10.030 --> 00:02:15.456
Hash FORM starts at the nearest form
ancestor; form ID establishes that context

00:02:15.456 --> 00:02:15.799
here.

00:02:15.979 --> 00:02:20.406
Hash ANCHOR starts at the nearest ancestor
explicitly marked as an anchor.

00:02:20.586 --> 00:02:25.482
These names are symbolic origins, not Data
keys named FORM or ANCHOR.

00:02:25.662 --> 00:02:28.321
Save and refresh after the server reloads.

00:02:31.657 --> 00:02:37.167
All five rows currently read the same price,
through relative, form, anchor, named

00:02:37.167 --> 00:02:38.444
and absolute paths.

00:02:38.624 --> 00:02:40.483
Change Price to eighteen again.

00:02:40.663 --> 00:02:46.202
All five rows update together; their origins
differ, but their resolved Data path is

00:02:46.202 --> 00:02:46.795
the same.

00:02:48.600 --> 00:02:51.906
Now add a data Formula and a heading for its
result.

00:02:53.947 --> 00:02:59.100
The first positional argument is the
destination, dot total; the second is the

00:02:59.100 --> 00:03:01.280
expression, price times quantity.

00:03:01.460 --> 00:03:06.164
The named inputs connect price and quantity
to their reactive relative pointers.

00:03:06.344 --> 00:03:09.512
The init option requests an initial
calculation.

00:03:09.692 --> 00:03:13.638
The heading reads dot total; it does not
repeat the calculation.

00:03:13.818 --> 00:03:19.359
This downloaded teaching host permits inline
JavaScript expressions; the strict

00:03:19.359 --> 00:03:22.446
generated scaffold uses named Logic instead.

00:03:22.626 --> 00:03:26.545
Save, wait for automatic reload, then
refresh the browser.

00:03:26.996 --> 00:03:31.848
The initial price is twelve, the quantity is
three, and the total is thirty six.

00:03:33.640 --> 00:03:35.211
Change Price to twenty.

00:03:35.391 --> 00:03:39.240
The total becomes sixty, using the unchanged
quantity of three.

00:03:39.420 --> 00:03:41.194
Now change Quantity to four.

00:03:41.374 --> 00:03:43.083
The total becomes eighty.

00:03:43.263 --> 00:03:45.492
Change Quantity once more, to five.

00:03:45.672 --> 00:03:47.638
The total becomes one hundred.

00:03:47.818 --> 00:03:53.048
Each input updates Data, the formula
recalculates order dot total, and the
heading

00:03:53.048 --> 00:03:54.260
follows that value.

00:03:54.440 --> 00:03:59.396
No save, reload, or click handler is needed
for these live input changes.

00:04:01.200 --> 00:04:06.607
We have used a data context to resolve
relative paths, then selected symbolic

00:04:06.607 --> 00:04:07.941
origins explicitly.

00:04:08.121 --> 00:04:13.190
We have declared a formula with a
destination, an expression, and named
reactive

00:04:13.190 --> 00:04:13.634
inputs.

00:04:13.814 --> 00:04:17.901
The result is stored separately in Data and
displayed through a pointer.

00:04:18.081 --> 00:04:23.869
Relative paths organize a region, symbolic
paths find an established origin, and

00:04:23.869 --> 00:04:25.823
formulas derive new values.

00:04:26.003 --> 00:04:30.515
In the next lesson we will request Data and
interface fragments from the server.